我想在導航打開和關閉時在切換類上添加淡入/淡出效果。有人知道如何？我正在使用切換類，因爲我在調整導航部分大小後消失的響應問題。在toggleclass上添加淡入效果？
nav ul.show {
display: block;
}
而對於jQuery中的JavaScript
$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').toggleClass("show");
});
});
試試這個。 http://jsfiddle.net/wz8vc0yo/12/
$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').fadeToggle("slow");
});
});
是的，這是我知道的作品，但它與我以前的問題有關：\t 在使用nav-btn打開和關閉並調整大於1000px的大小後，4個導航項中的3個消失。 [鏈接]（http://stackoverflow.com/questions/28394678/solution-disappearance-responsive-navigation-after-open-close） – KP83 2015-02-09 09:38:43
我更喜歡使用的CSS在jQuery的動畫過渡，這些天。對我來說，這看起來更清晰，更易於閱讀，因爲邏輯和可視化更加獨立。最後，行動不是衰落，而是狀態的變化（在這種情況下是類）。衰落效應是純粹的視覺噱頭。
nav ul {
display: block;
opacity: 0;
transition: opacity 500ms;
}
nav ul.show {
opacity: 1;
}
的工作原理，但在調整小於1000px之前，您會看到垂直導航毫秒和淡出。是否有可能刪除？ – KP83 2015-02-09 09:43:16
試試這個：Demo
// Show navigation //
$(function() {
$('.nav-btn').click(function(event) {
// alert();
if($('nav > ul').hasClass("show"))
{
// alert();
$('nav > ul').fadeOut(1000, function() {
$('nav > ul').removeClass('show');
});
} else {
//alert('no class');
$('nav > ul').fadeIn(1000, function() {
$('nav > ul').addClass('show');
});
}
});
});/************************************************
Site Name:
Author:
************************************************/
html, body {
margin: 0;
padding: 0;
}
body {
font-family: helvetica, arial, sans-serif;
font-weight: normal;
font-size: 22px;
line-height: 26px;
color: #222;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
:hover {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
strong, b {
font-weight: normal;
font-family: helvetica, arial, sans-serif;
}
h1 {
font-weight: bold;
font-size: 18px;
line-height: normal;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
margin: 0 0 25px 0;
}
h2 {
font-weight: normal;
font-size: 18px;
line-height: normal;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
margin: 0 0 0 0;
}
p {
margin: 0 0 25px 0;
}
p a {
color: #222;
text-decoration: underline;
}
p a:visited {
text-decoration: underline;
}
p a:hover {
text-decoration: none;
color: white;
background-color: #111;
}
.tag {
font-size: 14px;
text-transform: uppercase;
margin: 0 0 0 0;
}
/************************************************
Header - Navigation
************************************************/
header {
position: fixed;
width: 100%;
height: 60px;
top: 0;
left: 0;
padding: 0;
margin: 0;
z-index: 9999;
background-color: white;
}
/* Navigation */
.nav-btn {
display: none;
position: absolute;
left: 0;
top: 0;
height: 60px;
width: 60px;
z-index: 9999;
background: url(../elements/nav-icon.svg);
background-repeat: no-repeat;
background-position: center left;
background-color: red;
}
.nav-btn:hover {
background: url(../elements/nav-icon-hover.svg);
background-repeat: no-repeat;
background-position: center left;
background-color: blue;
}
nav {
margin: 0 40px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: transparent;
}
nav li {
position: relative;
float: left;
margin: 0;
padding: 0;
background-color: transparent;
}
nav a,
nav li a {
display: block;
font-size: 25px;
font-weight: bold;
color: #111;
line-height: 61px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
height: 60px;
padding: 0;
margin: 0 10px;
background-color: rgba(255,255,255,0.9);
}
nav a:hover,
nav li:hover a {
color: #aaa;
}
nav ul.show {
display: block;
}
/*nav li ul {
position: absolute;
float: left;
z-index: 1;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
nav li:hover ul {
opacity: 1;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
color: #aaa;
}*/
.col-nav,
.col-25 {
position: relative;
float: left;
width: 25%;
margin: 0;
}
/************************************************
Responsives
************************************************/
/*@media all and (min-width: 1601px) {
.col-25 {
width: 25%; }
}
@media all and (min-width: 1201px) and (max-width: 1600px) {
.col-25 {
width: 25%; }
}
@media all and (min-width: 1001px) and (max-width: 1200px) {
.col-25 {
width: 25%; }
}
@media all and (min-width: 0px) and (max-width: 400px) {
}
*/
@media all and (min-width: 1000px) {
.class_test{
display:block !important;
}
.home{
display:none;
}
}
@media all and (min-width: 801px) and (max-width: 1000px) {
.col-25 {
width: 33.33333%; }
}
@media all and (min-width: 601px) and (max-width: 800px) {
.col-25 {
width: 50%; }
}
@media all and (min-width: 0px) and (max-width: 600px) {
nav {
margin: 0 10px;
}
#container {
margin-left: 10px;
margin-right: 10px;
}
.col-25 {
width: 100%; }
}
@media all and (min-width: 0px) and (max-width: 1000px) {
nav ul {
display: none;
top: 60px;
}
/*nav:hover ul {
display: block;
}*/
.nav-btn {
display: block;
}
.home {
width: 220px;
margin: 0 auto;
}
.col-nav {
width: 100%; }
}
.nav ul {
transition: display .3s;
}
.nav ul.show {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
\t <nav>
\t \t <div class="col-nav">
\t \t \t <a href="#" class="nav-btn"></a>
\t \t \t <a href="#" class="home">Untitled</a>
\t \t </div>
\t \t <ul class="class_test">
\t \t \t <li class="col-nav"><a href="#">Item1</a></li>
\t \t \t <li class="col-nav"><a href="#">Item2</a></li>
\t \t \t <li class="col-nav"><a href="#">Item3</a></li>
\t \t </ul>
\t </nav>
</header>
像這樣http://jsfiddle.net/wz8vc0yo/7/？ – 2015-02-09 09:30:59
謝謝你的幫助！那麼我只是添加了淡入淡出，因爲這是我想要的，但現在我有同樣的問題，回到我以前：[鏈接]（http://stackoverflow.com/questions/28394678/solution-disappearance-responsive-navigation -after-open-close） – KP83 2015-02-09 09:36:00
使用nav-btn打開和關閉後，當調整大於1000像素時，4個導航項中的3個會消失。 – KP83 2015-02-09 09:37:13