Question

我已经尝试了所有我能想到的东西但是我似乎无法延迟jQuery Cycle插件的滑动，直到我的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
});

/ *为当前幻灯片的on 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进行动画制作以及一些延迟来执行操作在适当的时候。

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

1 个答案: