jQuery链接的行为不符合预期

我的理解是，在运行的函数完成之前，jQuery不会移动到下一个函数。然而，这似乎不适合我。例如：

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

我预计这将淡出#bigmap，然后将其显示设置为无。但是，它似乎立即设置为“无”

---

我对这一点很陌生，所以我确信这是显而易见的。

基本上，这不符合你的预期，是因为链在squeuence中触发并立即触发。动画功能在一段时间内执行

这意味着动画一启动，显示器就不会启动

您需要使用动画结束时运行的animate方法的回调函数

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

---

如果您可以找到有关回调函数的更多信息，在方法中称为

complete

。

您最好的选择实际上是：

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

这将使其淡出，并在完成后自动隐藏

要解释一下为什么原始代码没有按预期工作，您需要了解jQuery动画和javascript

jQuery动画进入动画队列并随时间执行（使用计时器）。调用

.animate（）

只会启动动画，然后该函数返回，远远早于动画完成。动画要过一段时间才能完成。因此，对

.animate（）

的调用返回后（动画开始后），将立即执行下一个链式方法

链式方法

$（选择器）.aaa（）.bbbbbb（）.cccc（）

由javascript引擎同步执行，因此jQuery不会控制它们的计时

幸运的是，正如其他答案也告诉您的那样，

.animate（）

方法有一个完成函数，这样您可以在动画完成时执行一些代码，并且可以将代码隐藏在其中

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

比这更好的方法是使用

.fadeOut（）

方法，该方法在完成后将自动隐藏对象，然后您甚至不必担心这个问题，因为隐藏是内置于jQuery

.fadeOut（）方法中的：

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

如果jquery以其他方式行事，那将是糟糕的；如果它在animate（）上被阻止，则在动画完成之前，页面将完全没有响应。@dex3703否，页面的JS运行单线程，jQuery无法控制。谢谢。我没有做同步手术。我已经将一些项目切换为fadein/out，但由于页面的布局方式，显示：没有问题。但是谢谢你的解释！