jQuery Cycle插件动画之前和之后的延迟

Question

使用jQuery Cycle2插件回调事件处理幻灯片演示脚本。实际周期本身使用div元素上的淡入淡出过渡。在div的内部是图像。然后，我使用回调事件来从右到左的屏幕上对图像进行动画处理。然后下一个事件将图像从右侧的屏幕上移开。

该脚本的作品，但我遇到的问题是图像动画顺序与淡入淡出过渡。只要事件被触发，图像就会滑出视图，div将一下子淡出。我想要达到的效果会是这样的模式：

• 触发事件
• 事业部在
• 短暂的延迟消失
• 图片动画的幻灯片在
• 触发事件
• 图片动画滑出
• 短暂延迟
• Div淡出

本质上，我想在循环插件淡入转换运行之前完成图像动画。我无法弄清楚如何设置延迟。

作为参考，循环2 API：http://jquery.malsup.com/cycle2/api/

$('.slides').on('cycle-next, cycle-before', function(e, opts) { 
    $('.slide.active img').each(function() { 
     $(this).stop().animate({ 
      left: -3000, 
     }, 1000); 
    }); 
}); 

$('.slides').on('cycle-next', function(e, opts) { 
    $('.slide.active img').each(function() { 
     $(this).css({ 
      left: 3000, 
      display: 'block' 
     }); 
     $(this).stop().animate({ 
      left: 0 
     }, 1000, 'easeOutQuad'); 
    }); 
}); 

任何帮助，任何人都可以提供将非常感激！

编辑：设置工作脚本的快速小提琴：http://jsfiddle.net/ardsN/

Answer 1

最彻底的方法是在循环2插件Cycle2 Advanced API

来定义这个下面是如何Malsup已与shuffle和tile插件做到了这一点。

Answer 2

尝试获得滑块的状态成这样子：

jQ('.cycle-slideshow').data('cycle.opts').busy 

你可以使用：

jQ(document).ready(function() { 
    jQ(document.documentElement).keypress(function (e) { 
     if (e.keyCode == 39 && jQ('.cycle-slideshow').data('cycle.opts').busy !== true) 
     { 
      jQ('.cycle-slideshow').cycle("next"); 
     } 
     if (e.keyCode == 37 && jQ('.cycle-slideshow').data('cycle.opts').busy !== true) 
     { 
      jQ('.cycle-slideshow').cycle('prev'); 
     } 
    }); 
});