事件顺序 jQuery

Question

我的页面上有一个HTML元素，我已经为该元素附加了一些效果（动画）。我快完成了，但我无法弄清楚为什么动画由于某种原因执行混乱......如果可能的话，请专注于第二个功能，因为我不想弄乱完美运行的代码

$(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();

在同一函数中的其他两个之前执行。为什么？

Answer 1

隐藏被"首先"执行的原因是这三个同时被执行。要对动画进行排序，您需要使用回调或链接。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);        
});

---

（PSST."追加"意味着更接近连接的东西，你不是将效果附加到元素，而是附加它们。动画操作不是事件，所以它不是事件顺序问题，而是执行顺序问题。干杯。

Answer 2

使用回调：

$("#top").animate({width:10}, 700, function(){
    $("#navigation").hide();
});

关于原因，一个简单的解释：这是因为前两行需要时间才能完成，而最后一行在这两行完成之前立即运行并完成。