javascript 在toggleclass 上添加淡入淡出效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28406445/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a fadeIn effect on toggleclass?
提问by KP83
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.
我想在导航打开和关闭时在切换类上添加淡入/淡出效果。有人知道怎么做吗？我正在使用切换类，因为我之前在调整导航部分大小时遇到的响应问题消失了。
nav ul.show {
display: block;
}
And for the javascript
而对于 javascript
$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').toggleClass("show");
});
});
回答by vrajesh
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>回答by Frebin Francis
Use fadeToggle()method in jquery
在jquery中使用fadeToggle()方法
you can refer the other methods also here
Hope this helps
希望这可以帮助
回答by Deshan
try this. http://jsfiddle.net/wz8vc0yo/12/
试试这个。 http://jsfiddle.net/wz8vc0yo/12/
$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').fadeToggle("slow");
});
});
回答by arkascha
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.
这些天我更喜欢使用 css 转换而不是 jquery 动画。对我来说，这看起来更清晰、更容易阅读，因为逻辑和可视化更加分离。最后，动作不是衰落，而是状态（或本例中的类）的变化。褪色效果是纯粹的光学噱头。
nav ul {
display: block;
opacity: 0;
transition: opacity 500ms;
}
nav ul.show {
opacity: 1;
}
