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

使用回调：

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

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

Answer 2

“首先”执行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);        
});

（psst。“Append”意味着更接近连接的东西，你不会将效果附加到元素上，你附加它们。动画操作不是事件，因此它不是事件顺序问题，它是执行顺序问题。干杯。）

事件顺序jQuery

2 个答案: