jQuery链接没有按预期运行

Question

我的未知是jQuery在运行完成之前不会移动到下一个函数。但似乎这对我不起作用。例如：

                    $("#bigmap").animate(
                    {
                    opacity: 0
                    }, 500).css("display", "none");     

我希望这会淡出#bigmap，然后将其显示设置为none。但是，似乎没有立即设置。

我是新手，所以肯定这是明显的。

Answer 1

基本上这是因为你的预期不起作用的原因是因为链在sqeuence中触发并立即触发。动画功能会在一段时间内发生。

这意味着一旦动画被踢掉，显示屏就不会触发。

您需要使用动画完成时运行的animate方法的回调函数。

$('#bigmap').animate({
    opacity:0
}, 500, function() {
    $(this).hide();
});

如果您checkout the docs，您可以找到有关回调函数的更多信息，方法中名为complete。

Answer 2

这里你最好的选择就是：

$('#bigmap').fadeOut(500);

这会淡化它并在完成后自动隐藏它。

为了解释原始代码无法正常工作的原因，您需要了解一下jQuery动画和javascript。

jQuery动画进入动画队列并随着时间的推移执行（使用计时器）。对.animate()的调用只是启动动画，然后在动画完成之前很久就会返回该函数。动画直到一段时间后才会完成。因此，只要对.animate()的调用返回（动画开始后），就会执行下一个链式方法。

链式方法$(selector).aaa().bbbb().cccc()由javascript引擎同步执行，因此jQuery无法控制它们的时间。

幸运的是，正如其他答案也告诉你的那样，.animate()方法有一个完成函数，这样你就可以在动画完成时执行一些代码，你可以把你的代码隐藏在那里。

$('#bigmap').animate({opacity:0}, 500, function() {
    $(this).hide();
});

比这更好的是使用.fadeOut()方法，它会在完成后自动隐藏对象，然后你根本不必担心这个问题，因为隐藏内置于jQuery {{ 1}}方法：

.fadeOut()