0

我的页面上有一个 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();

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

4

2 回答 2

2

使用回调：

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

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

于 2012-09-28T02:45:12.317 回答
2

hide 'first' 执行的原因是所有三个都同时执行。要订购动画，您需要使用回调或链接。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。“附加”意味着更接近连接的东西，您不会将效果附加到元素，而是附加它们。动画操作不是事件，所以它不是事件顺序问题，而是执行顺序问题。干杯。）

于 2012-09-28T02:47:06.767 回答