事件顺序jQuery
事件顺序jQuery
提问于 2012-09-28 10:43:30
我在我的页面上有一个HTML aside元素，并且我给这个元素添加了一些效果(动画)。我已经差不多完成了，但是我搞不懂为什么动画会因为某种原因执行disordered...please专注于第二个函数，如果可能的话，因为我不想搞乱一个完美工作的代码
$(document).ready(function(){
$("aside, #top").hover(function(){
$("aside").animate({width:100}, 700);
$("#top").animate({width:100}, 700);
$("#navigation").show();
});
$("aside, #top").mouseleave(function(){
$("aside").animate({width:10}, 700);
$("#top").animate({width:10}, 700);
$("#navigation").hide();
});最后一个
$("#navigation").hide();在同一函数中的其他两个函数之前执行。为什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-09-28 10:47:07
hide被“优先”执行的原因是这三个都是同时执行的。要排序动画，您需要使用回调或链接。http://api.jquery.com/animate/
回调将在动画结束后运行。它看起来只会先运行，因为.hide根本不需要时间，但动画需要700ms才能运行。
如果希望.hide发生在动画周期中的特定点，也可以使用超时。
$("aside, #top").mouseleave(function(){
$("aside").animate({width:10}, 700);
$("#top").animate({width:10}, 700, function(){
$("#navigation").hide();
});
});或
$("aside, #top").mouseleave(function(){
$("aside").animate({width:10}, 700);
$("#top").animate({width:10}, 700);
setTimeout(function(){
$("#navigation").hide();
}, 700);
});(请注意：" append“指的是更接近于连接的东西，你不会将效果附加到元素上，而是附加它们。并且动画操作不是事件，所以它不是事件顺序问题，而是执行顺序问题。干杯。)
Stack Overflow用户
发布于 2012-09-28 10:45:12
使用回调：
$("#top").animate({width:10}, 700, function(){
$("#navigation").hide();
});关于原因，一个简单的解释是:这是因为前两行需要时间来完成，而最后一行运行并立即完成，在这两行完成之前。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12632908
复制相关文章
相似问题
腾讯云开发者
