我的不确定是jQuery不会移动到下一个函数,直到运行完成。但是,似乎这不适合我。例如:jQuery链接不像预期的那样行为
$("#bigmap").animate(
{
opacity: 0
}, 500).css("display", "none");
我希望这会淡出#bigmap,然后将其显示设置为无。但是,它似乎立即没有设定。
我是新来的,所以确定它是明显的东西。
我的不确定是jQuery不会移动到下一个函数,直到运行完成。但是,似乎这不适合我。例如:jQuery链接不像预期的那样行为
$("#bigmap").animate(
{
opacity: 0
}, 500).css("display", "none");
我希望这会淡出#bigmap,然后将其显示设置为无。但是,它似乎立即没有设定。
我是新来的,所以确定它是明显的东西。
你最好的选择这里其实是这样的:
$('#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);
基本上,这是不工作的原因是你期望的是因为链触发在sqeence和立即着火。动画功能发生一段时间。
这意味着一旦动画被启动,显示器就不会触发。
您需要使用动画完成时运行的animate方法的回调函数。
$('#bigmap').animate({
opacity:0
}, 500, function() {
$(this).hide();
});
如果checkout the docs你可以找到在回调函数的详细信息,在该方法中调用complete
。
如果jquery采取任何其他方式会很糟糕;如果它在animate()上被阻塞,那么在动画完成之前页面将完全无响应。 – 2011-11-17 01:55:41
它不能在多个线程中运行吗? – dex3703
@ dex3703不,页面的JS运行单线程,并且jQuery无法控制它。 – 2012-01-29 14:52:07
谢谢。同步操作是我没有得到的。我已经将一些项目切换为淡出/淡出,但是由于页面布局的显示方式:没有任何问题。但是,谢谢你的解释! – dex3703