jQuery循環插件幻燈片延遲，直到onBefore完成

我試過了我能想到的所有內容，但我似乎無法延遲jQuery Cycle插件的幻燈片，直到完成後我的onBefore動畫完成。我試着用循環（'toggle'）使用delay（）和setTimeout（）。任何人都有關於如何推遲下一張幻燈片的任何想法，直到onBefore中的所有內容完成爲止？jQuery循環插件幻燈片延遲，直到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() { }); 
}

來源

2011-12-13 jdehlin

似乎沒有辦法延遲幻燈片轉換，直到onBefore完成。作爲一項解決方案，我能夠通過基本描述下一張幻燈片在當前幻燈片的onAfter過渡之前會發生什麼，從而做到我需要的內容。

/*手動描述動畫的第一個*/

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

/*傳遞週期所說的 '後' 和 'skipInitializationCallbacks' */

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

/*是否所有您下一張幻燈片中的動畫在當前幻燈片後*/

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

現在我是sur如果沒有完整的上下文，這真的讓人感到困惑，但它應該讓您瞭解如何在幻燈片切換之前通過使用上一張幻燈片的onAfter和一些延遲來在適當的時間執行某些事情來執行動畫。

來源

2011-12-15 18:08:49 jdehlin

jQuery循環插件幻燈片延遲，直到onBefore完成

回答

相關問題