我在jQuery中有这个简单的功能:
I have this simple function in jQuery:
function detailspage(page) { if (page != checkcurrent) { checkcurrent = page; $('div#details').children("div").slideUp("slow", function() { $('div#details').children("div"+page).slideDown("slow"); }); }; };我将三个< div> 放在另一个名为< div id ="details"> 的÷ div> 内>,并且默认情况下它们都向上滑动并看不见.现在,当单击每个按钮时,我希望它们每个都向下滑动.当然,在将新的< div> 向下滑动之前,必须先向上滑动并使其不可见.这就是为什么我在上面尝试了这个简单的回调函数的原因.
I have put three <div>'s inside another <div> called <div id="details">, and they are all slided up and out of sight by default. I now wish to make each of them slide down, when a button for each of them is clicked. Of course a <div> that is open must first be slided up and out of sight, before the new one is slided down. That is why I have tried this simple callback function above.
( page 变量包含一个 div 的ID,例如 #info 或 #cast_crew .)
(The page variable contains an id for one of the div's, like #info or #cast_crew.)
但是它不起作用:您可以通过单击页面底部左侧的三个按钮来看到错误.,分别命名为演员和剧组",信息"和加莱里" .
除了回调函数外,所有这些工作似乎都不会引起任何延迟.回调无效.我只是希望新框的向下滑动在当前框的向上滑动完成后开始.
It all works apart from the callback function that doesn't seem to cause any delay. The callback has no effect. I simply want the slidedown of the new box to start when the slideup of the current box is finished.
怎么了?为什么我的回调不起作用?
What is wrong? Why doesn't my callback work?
谢谢.
推荐答案我将看一下jquery中的promise函数,以确保所有元素都完成了动画: api.jquery/promise/
I would take a look at the promise function in jquery to ensure all elements have completed the animation: api.jquery/promise/
以您的示例为例:
function detailspage(page) { if (page != checkcurrent) { // so we only have to search the dom once var details = $('div#details'); checkcurrent = page; details.children("div").slideUp("slow").promise().done( function() { $('div' + page).slideDown("slow"); }); }; };工作示例: jsfiddle/cm3pv/6/
更多推荐
回调函数触发得太早
发布评论