jQuery链接不像预期的那样行为

Question

我的不确定是jQuery不会移动到下一个函数，直到运行完成。但是，似乎这不适合我。例如：

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

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

我是新来的，所以确定它是明显的东西。

Answer 1

你最好的选择这里其实是这样的：

$('#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 .fadeOut()方法：

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

Answer 2

基本上，这是不工作的原因是你期望的是因为链触发在sqeence和立即着火。动画功能发生一段时间。

这意味着一旦动画被启动，显示器就不会触发。

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

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

如果checkout the docs你可以找到在回调函数的详细信息，在该方法中调用complete。