如何在Jquery中切换动画
[英]How to toggle an animation in Jquery
问题描述
I am trying to make an animation on a navigation menu where when an option is clicked the other two fade out, since .fadeToggle had problems with positioning for me I decided to just animate the opacity to 0, and then back to 1 when clicked on again. 
我试图在导航菜单上制作动画，当点击一个选项时，其他两个淡出，因为.fadeToggle有定位问题我决定只将不透明度设置为0，然后点击时返回1再次。 (I left the CSS out the the code posted down below) （我把CSS留下了下面发布的代码）
https://jsfiddle.net/L703yvke/ https://jsfiddle.net/L703yvke/
<div id='bckDrp'>
<div id='nav'>
<ul id='navLst'>
<li class='navOp' id='hme'>Home</li>
<li class='navOp' id='abt'>About</li>
<li class='navOp' id='prt'>Portfolio</li>
</ul>
</div>
</div>
var main = function(){
$('#hme').click(function(){
$('#abt, #prt').animate({opacity: 0},300 );
});
if($('#abt, #prt').css('opacity') == 0) {
$('#hme').click(function(){
$('#abt, #prt').animate({opacity: 1},300 );
}
)};
}
$(document).ready(main);
5 个解决方案
解决方案1
2 已采纳 2016-08-26 00:44:30
The main function only runs once. main功能只运行一次。 So you are only doing that if-statement once. 所以你只做一次if-statement 。 Also you are binding click events, which I don't think is what you are expecting it to do. 你也是绑定click事件，我认为这不是你期望它做的。 Instead you can simply use a if-else and have your condition inside the click event: 相反，您可以简单地使用if-else并在click事件中使用您的条件：
var main = function(){
$('#hme').click(function(){
if($('#abt, #prt').css('opacity') == 0)
$('#abt, #prt').animate({opacity: 1},300 );
else
$('#abt, #prt').animate({opacity: 0},300 );
});
}
解决方案2
1 2016-08-26 00:47:43
I would heavily recommend handling the animation as a transition in CSS and simply toggling a class. 我强烈建议将动画处理为CSS中的过渡并简单地切换类。
CSS CSS
#abt, #prt{
opacity:1;
transition: opacity 300s;
}
#abt.hide, #prt.hide{
opacity:0;
}
jQuery jQuery的
$('#hme').on('click', function(){
$('#abt, #prt').toggleClass('hide');
});
解决方案3
0 2016-08-26 00:48:55
Change your code : 更改您的代码：
var main = function() {
$('#hme').click(function(){
var op = $('#abt, #prt').css('opacity');
if (op == 1)
$('#abt, #prt').animate({opacity: 0},{duration:300} );
else if(op == 0)
$('#abt, #prt').animate({opacity: 1},{duration:300} );
})
}
$(document).ready(function(){
main();
})
Final code : 最终代码：
<!DOCTYPE html> <html> <head> </head> <body> <div id='bckDrp'> <div id='nav'> <ul id='navLst'> <li class='navOp' id='hme'>Home</li> <li class='navOp' id='abt'>About</li> <li class='navOp' id='prt'>Portfolio</li> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> var main = function() { $('#hme').click(function(){ var op = $('#abt, #prt').css('opacity'); if (op == 1) $('#abt, #prt').animate({opacity: 0},{duration:300} ); else if(op == 0) $('#abt, #prt').animate({opacity: 1},{duration:300} ); }) } $(document).ready(function(){ main(); }) </script> </body> </html>
解决方案4
0 2016-08-26 01:30:54
First, you had a typo.... )}; 首先，你有一个错字.... )}; the brackets are reversed. 括号颠倒过来。 They should be }); 他们应该是});
Then you could simplify a great deal by just using the built in toggleClass(); 然后你可以通过使用内置的toggleClass();来简化很多事情toggleClass(); function and dynamically getting the clicked element rather than needed to refer to each and every id used. 函数和动态获取被点击的元素，而不是需要引用所使用的每个id 。 This means you can add/subtract from the #nav list and the function will work regardless of the element id s. 这意味着您可以在#nav列表中添加/减去该函数，无论元素id如何，该函数都将起作用。 The "fade" is all handled in the CSS and you don't need to edit the function at all. “淡入淡出”全部在CSS中处理，您根本不需要编辑该函数。
the only thing you'd need to edit from here are nav items in the HTML. 您需要编辑的唯一内容是HTML中的导航项。 (if they change...) （如果他们改变......）
var main = function(){ $('#nav li').on('click', function() { var thisNav = $(this); thisNav.toggleClass('active'); $('#nav li').not(thisNav).toggleClass('fadeit'); }); } $(document).ready(main);
ul { list-style: none; margin: 10px; padding:0; } li { display: block; padding: 5px 10px; margin: 10px 0; text-align: center; text-transform: uppercase; background: #eee; border: 1px solid #ddd; /* below handles the opacity fade */ opacity: 1; transition: all 1s; } .active, li:hover { background: #fee; } /* below handles the opacity fade */ .fadeit { opacity: 0; transition: all 1s; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='bckDrp'> <div id='nav'> <ul id='navLst'> <li class='navOp' id='hme'>Home</li> <li class='navOp' id='abt'>About</li> <li class='navOp' id='prt'>Portfolio</li> </ul> </div> </div>
解决方案5
0 2016-08-26 01:38:13
You need set your code with the sentence if, inside the callback .click; 你需要在回调中使用句子设置你的代码.click; This is necessary because the JS code is loaded only once and in this moment your sentence (if) is read only with the event .loaded() 这是必要的，因为JS代码只加载一次，在这一刻你的句子（if）只读取事件.loaded（）
This is a solution for you: 这是一个解决方案：
var main = function(){
$('#hme').click(function(){
$('#abt, #prt').animate({opacity: 0},300 );
if($('#abt, #prt').css('opacity') == 0) {
$('#abt, #prt').animate({opacity: 1},300 );
}else{
$('#abt, #prt').animate({opacity: 0},300 );
};
});
}
$(document).ready(main);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.