2011-07-10 71 views
0

前完成在我的学习我一直学习和理解jQuery的回调是这样的:当前的动画(效果)后执行为什么动画没有回调

的回调函数执行完毕。

带动画,即使动画未完成,也可以运行下一行代码。这可能会产生错误。 为了防止这种情况,您可以创建一个回调函数。直到动画完成后才会调用回调函数。 引文:www.w3schools.com[...]

回调是作为参数传递给另一个功能传递和它的父功能完成之后将被执行的功能。 引文:www.jquery.com[...]

回调的使用不会出于某种原因。

请看下面的代码:

$(page).slideUp("slow", function() { 

    $('div#details').html(details); 
    $(page).slideDown("slow");    

}); 

这应该使contentbox向上滑动,并因此消失,然后将内容更改为新的东西,最后是contentbox再次下滑(出现)。我需要按照这个顺序依次执行这三个步骤,但每一步只能在前一个完成时才开始。这就是为什么我用的回调,而不是仅仅有这样的:

$(page).slideUp("slow"); 

$('div#details').html(details); 

$(page).slideDown("slow"); 

这会让一切发生在同一时间。

我的代码有效,我可以通过点击一个按钮来移动页面内容。但是动画并没有像我期望的那样反应。点击该按钮后,内容立即消失,没有任何动画幻灯片。新内容然后以精美的动画滑动。

Click around the left sidemenu here, to see what happends.

我不明白为什么没有动画效果基本show,但我怀疑回调并不像我想的那样。看起来,回调在第一个动画开始时触发,而不是在动画完成之前等待触发。或者,也许这只是slideUp,根本不起作用?

任何人都可以向我解释什么,我不知道,并没有看到在这个非常简单的代码,包括回调?

回答

1

把了slideDown回调

$(page).slideUp("slow", function() { 

    $('div#details').html(details); 
    $(page).slideDown("slow"); 
}); 

你以前的代码只是效果基本show结束后更新了DIV #details。

+0

不起作用。看来slideUp不会做任何事情。我现在已经在网站上的代码中完成了它,但仍然没有运气。但感谢评论。你是绝对正确的,最后一行当然也应该在回调中(理论上)。我已将它编辑到我的问题中,并将您的答案投给了答案。 – Steeven

+0

那么,我假设页面是一个变量 - 实际上应该是滑动? – AlienWebguy

+0

查看你的源代码后,我认为它不会滑动,因为它在它有机会之前从DOM中删除。检查它上面的2行 - 解包和wrap()。尝试将这两行放在slideUp回调中。 – AlienWebguy

2

您可以使用延迟功能作为解决方法。

$(page).slideUp(500); 
$('div#details').html(details); 
$(page).delay(500).slideDown(500); 
相关问题