jQuery循环插件滑动延迟，直到onBefore完成

Question

我已经尝试了我能想到的一切，但我似乎不能延迟jQuery循环插件的幻灯片，直到我的onBefore动画完成后。我试过使用delay()和setTimeout()与cycle('toggle')。有人知道如何将下一张幻灯片延迟到onBefore的所有内容完成吗?

$('#feature').cycle({ 
  fx:     'scrollLeft', 
  easing: 'easeOutExpo', 
  speed: 1000,  
  timeout: 3000,
  before:  onBefore
});
function onBefore(curr, next, opts, forwardFlag) { 
  $(curr).children("div").animate({  left : '960px' }, 300, function() {  });
}

Answer 1

似乎没有办法延迟幻灯片过渡，直到onBefore完成。作为一种变通方法，我能够通过描述在当前幻灯片的onAfter中切换到下一张幻灯片之前会发生什么来完成下面的工作。

/*手动描述第一个动画*/

$('#feature .featureStory:first').children("a").delay(4500).animate({marginTop:'100'}, 500);

/*传递循环调用'after'和'skipInitializationCallbacks' */

$('#feature').cycle({ 
  fx: 'scrollLeft', 
  easing: "easeOutExpo",
  speed: 1000,
  timeout: 6000,
  after: onAfter,
  skipInitializationCallbacks: true
});

/*在当前幻灯片的onAfter中完成下一张幻灯片的所有动画*/

function onAfter(curr, next, opts, ff) {
  $(next).children(".featureStory").animate({left:'560px'}, 500, function(){ 
    $(this).children("a").animate({marginTop:'0'}, 500);
    $(this).children("a").delay(3500).animate({marginTop:'100'}, 500);
    $(next).children(".featureStory").delay(4500).animate({  left : '960px' }, 500); 
  });
}

现在我确信如果没有完整的上下文，这真的很令人困惑，但它应该让你了解如何在幻灯片过渡之前通过使用前一张幻灯片的onAfter和一些延迟来让事情在适当的时间执行。