问题
I want to add a fadeIn/Out effect on a toggle class when navigation is open and close. Somebody know how? I'm using the toggle class because of a responsive problem i had before when resizing part of the navigation disappeared.
FIDDLE example
nav ul.show {
display: block;
}
And for the javascript
$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').toggleClass("show");
});
});
回答1:
Try this: 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>
<nav>
<div class="col-nav">
<a href="#" class="nav-btn"></a>
<a href="#" class="home">Untitled</a>
</div>
<ul class="class_test">
<li class="col-nav"><a href="#">Item1</a></li>
<li class="col-nav"><a href="#">Item2</a></li>
<li class="col-nav"><a href="#">Item3</a></li>
</ul>
</nav>
</header>回答2:
Use fadeToggle() method in jquery
you can refer the other methods also here
Hope this helps
回答3:
try this. http://jsfiddle.net/wz8vc0yo/12/
$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').fadeToggle("slow");
});
});
回答4:
I prefer using css transitions these days over jquery animations. To me that appears more clear and easier to read, since logic and visualization are more separate. In the end the action is not the fading, but the change of state (or class in this case). The fading effect is a pure optic gimmick.
nav ul {
display: block;
opacity: 0;
transition: opacity 500ms;
}
nav ul.show {
opacity: 1;
}
来源：https://stackoverflow.com/questions/28406445/add-a-fadein-effect-on-toggleclass