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'); 
     } 
    }); 
});