有一天，我对我的jQuery动画集有一个非常奇怪的问题。
我尝试了多种方法，但所有这些只是给我带来了奇怪的错误。
我为我的例子做了一个小问题。 请检查console.log并尝试在html中看到动画，它表现得非常奇怪。
我有一个菜单，首先关闭一个框，首先淡出内部文本，然后打开另一个框，一次淡化每行文本。
我试图阻止在动画仍在进行时点击菜单的另一个元素的可能性。
我也试过使用.promise().done(function(){...与每个函数但不起作用。
http://jsfiddle.net/XpJud/
我的js文件
$(document).ready(function(){ var ongoing=false; var selected="one"; $("ul li").click(function(){ console.log("ongoing : " +ongoing); if($(this).index() == 1 && selected != "two" && !ongoing ){ console.log("clicked two and in"); console.log(ongoing); ongoing=true; var text=$("ul li:nth-child(1)").text(); console.log(text); $("."+selected+" div").animate({"opacity": 0},1000,function(){ $("."+selected).animate({'width': '0px'},1000,function(){ $("."+selected).hide(); $(".extra").animate({"color": "blue"},1000); $("."+text).show().animate({'width': '800px'},1000,function(){ selected=text; $("."+selected+" div").each(function(i){ $(this).delay(i*2000).animate({"opacity": 1},2000,function(){ console.log(i + " is finished"); if(i == 2){ ongoing=false; } }); }); }); }); }); } else if($(this).index() == 2 && selected != "three" && !ongoing){ console.log("clicked about and in"); console.log(ongoing); ongoing=true; var text=$("ul li:nth-child(2)").text(); console.log(text); $("."+selected+" div").animate({"opacity": 0},1000,function(){ $("."+selected).animate({'width': '0px'},1000,function(){ $("."+selected).hide(); $(".extra").animate({"color": "red"},1000); $("."+text).show().animate({'width': '800px'},1000,function(){ selected=text; $("."+selected+" div").each(function(i){ $(this).delay(i*2000).animate({"opacity": 1},2000,function(){ console.log(i + " is finished"); if(i == 2){ ongoing=false; } }); }); }); }); }); } }); });我的html文件
<div class='extra'> Hi</div> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <div id="content"> <div class='one'> <div class='one-1'>test test test test</div><br> <div class='one-2'>test test test test</div><br> <div class='one-3'>test test test test</div><br> </div> <div class='two'> <div class='two-1'>test test test test</div><br> <div class='two-2'>test test test test</div><br> <div class='two-3'>test test test test</div><br> </div> <div class='three'> <div class='three-1'>test test test test</div><br> <div class='three-2'>test test test test</div><br> <div class='three-3'>test test test test</div><br> </div> </div>我的css文件
ul li{ display:inline-block; background: red; cursor: pointer; } #content{ width:100%; } .three{ margin: 0 auto; width: 0px; display: none; height: 360px; text-align: center; background: #EEE836; font-size: 50px; margin-bottom: 180px; } .two{ margin: 0 auto; width: 0px; display: none; height: 360px; text-align: center; background: blue; font-size: 50px; margin-bottom: 180px; } .one{ margin: 0 auto; width: 800px; margin-bottom: -180px; height: 360px; background: white; text-align: center; background: red; font-size: 50px; }For a day now I am having a very weird problem with my set of jQuery animations.
I tried multiple approaches but all of them just give me weird bugs.
I made a jsfiddle for my example. Please check the console.log and also try seeing the animations being done in the html, it's acting very weird.
I have a menu that first closes a box by first fading out the text inside then opens another box and fades each line of text at a time.
I am trying to block the possibility of clicking on another element of a menu while there is an animation still going.
I have also tried using .promise().done(function(){... with the each function but that didn't work.
http://jsfiddle.net/XpJud/
My js file
$(document).ready(function(){ var ongoing=false; var selected="one"; $("ul li").click(function(){ console.log("ongoing : " +ongoing); if($(this).index() == 1 && selected != "two" && !ongoing ){ console.log("clicked two and in"); console.log(ongoing); ongoing=true; var text=$("ul li:nth-child(1)").text(); console.log(text); $("."+selected+" div").animate({"opacity": 0},1000,function(){ $("."+selected).animate({'width': '0px'},1000,function(){ $("."+selected).hide(); $(".extra").animate({"color": "blue"},1000); $("."+text).show().animate({'width': '800px'},1000,function(){ selected=text; $("."+selected+" div").each(function(i){ $(this).delay(i*2000).animate({"opacity": 1},2000,function(){ console.log(i + " is finished"); if(i == 2){ ongoing=false; } }); }); }); }); }); } else if($(this).index() == 2 && selected != "three" && !ongoing){ console.log("clicked about and in"); console.log(ongoing); ongoing=true; var text=$("ul li:nth-child(2)").text(); console.log(text); $("."+selected+" div").animate({"opacity": 0},1000,function(){ $("."+selected).animate({'width': '0px'},1000,function(){ $("."+selected).hide(); $(".extra").animate({"color": "red"},1000); $("."+text).show().animate({'width': '800px'},1000,function(){ selected=text; $("."+selected+" div").each(function(i){ $(this).delay(i*2000).animate({"opacity": 1},2000,function(){ console.log(i + " is finished"); if(i == 2){ ongoing=false; } }); }); }); }); }); } }); });My html file
<div class='extra'> Hi</div> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <div id="content"> <div class='one'> <div class='one-1'>test test test test</div><br> <div class='one-2'>test test test test</div><br> <div class='one-3'>test test test test</div><br> </div> <div class='two'> <div class='two-1'>test test test test</div><br> <div class='two-2'>test test test test</div><br> <div class='two-3'>test test test test</div><br> </div> <div class='three'> <div class='three-1'>test test test test</div><br> <div class='three-2'>test test test test</div><br> <div class='three-3'>test test test test</div><br> </div> </div>My css file
ul li{ display:inline-block; background: red; cursor: pointer; } #content{ width:100%; } .three{ margin: 0 auto; width: 0px; display: none; height: 360px; text-align: center; background: #EEE836; font-size: 50px; margin-bottom: 180px; } .two{ margin: 0 auto; width: 0px; display: none; height: 360px; text-align: center; background: blue; font-size: 50px; margin-bottom: 180px; } .one{ margin: 0 auto; width: 800px; margin-bottom: -180px; height: 360px; background: white; text-align: center; background: red; font-size: 50px; }最满意答案
（1）当您一次为多个元素设置动画时，您希望在最后一个动画完成后调用回调一次。
要完成此任务，您需要具备以下条件：
$("."+selected+" div").animate({"opacity": 0},1000,function(){您可以将其更改为：
$("."+selected+" div").animate({"opacity": 0},1000).promise().done(function(){我从这个Stackoverflow问题中得到了这个技术。
（2）在你淡入某些东西之前，你必须首先确保它一直淡出。 同样，在显示元素然后增加其宽度之前，必须确保它首先具有宽度0.这些更改可以使用.css()函数进行，并且应该在调用.show()之前执行。
例如，你有：
$("."+text).show().animate({'width': '800px'}...你应该有：
$("."+text).css({'width': '0px'}).show().animate({'width': '800px'}...（3）使用.delay()来顺序动画化元素列表，而不是使用（尽管更简单）技术，以下技术可以提供更好的结果：
var i = 0; (function() { var $el = $($elements[i++] || []); if ($el.length > 0) { $el.animate({ opacity: 1 }, 2000, arguments.callee); } else { // Perform final tasks. } })();我从这里改编了这项技术。
演示JSFIDDLE
(1) When you animate multiple elements at once, you want the callback to get called just one time, after the last animation is finished.
To accomplish this, where you have the following:
$("."+selected+" div").animate({"opacity": 0},1000,function(){You can change it to:
$("."+selected+" div").animate({"opacity": 0},1000).promise().done(function(){I got this technique from this Stackoverflow question.
(2) Before you fade something in, you must first ensure that it starts as faded out all the way. Likewise, before you show an element and then increase its width, you must ensure that it first has a width of 0. These changes can be made with the .css() function and should be performed before calling .show().
For example, where you have:
$("."+text).show().animate({'width': '800px'}...You should have:
$("."+text).css({'width': '0px'}).show().animate({'width': '800px'}...(3) Instead of using the (albeit simpler) technique of using .delay() for animating a list of elements sequentially, the following technique gives better results:
var i = 0; (function() { var $el = $($elements[i++] || []); if ($el.length > 0) { $el.animate({ opacity: 1 }, 2000, arguments.callee); } else { // Perform final tasks. } })();I adapted this technique from here.
DEMO ON JSFIDDLE
更多推荐
发布评论