jQueryサイクル - '次のスライドにアニメーション化する前に完了する関数'

Question

スライダーにjQueryサイクルプラグインを使用しています - スライダーが次のスライドに移動する前に次のリンクをクリックすると機能を完了する必要があります。

「before」機能が完了する前に、次のアクションが発生するのを防ぐことができません。私は以下のコードを使用しています。

$('#marques-slider').cycle({ 
fx: 'scrollHorz', 
transition: 'scrollHorz', 
timeout: 0, 
prev: '#prev-slide', 
    next: '#next-slide', 
    pager: '#nav', 
    easing: 'easeInOutExpo', 
    speed: 1000, 
    before: slideUp, 
    after: slideDown, 
    startingSlide: 1 
}); 

現在、私のonBefore機能と次のスライド機能は同時にアニメーション化されています。

私はまた、プラグインの外に次のリンクを作成しようとした：

  $('#next-slide').click(function(){ 
       $('.marques-product-content').animate({ 
        height : '0' 
       }, function(){ 
        $('#marques-slider').cycle('next'); 
       }); 
       return false; 
      }); 

を、これはスライドでいくつかのファンキーな行動はアニメーションや機能のみを最初のクリックで作業をする前に、変化する画像backfground原因：/

を

Answer 1

「次の」関数が、プラグインメソッドを使用して「前」を完了するのを待つ方法がないようです。 （私は、コードを通していくつかの注意事項/コメント/カスタマイゼーションを追加として正確ではない） -

var fn = function() {$n.delay(800).animate(opts.animIn, speedIn, easeIn, cb)}; 
$l.delay(800).animate(opts.animOut, speedOut, easeOut, function() { 
    if (opts.cssAfter) $l.css(opts.cssAfter); 
    if (!opts.sync) fn(); 
}); 

約ライン860：

は、しかし、あなたが論文ライン上の次の機能を遅らせることができcycle.jsコード掘り下げます。ここでは、目的の効果を与える.delay（800）を追加しました。

Answer 2

待機している別の機能を呼び出すことはできませんか？

$('#slideshow').cycle({ 
before: onBefore, 
after: onAfter 
}); 

function onBefore(curr, next, opts){ 
    //Before changing slides do this 
}; 

function onAfter(curr, next, opts){ 

//here, set your delay or a loop that continues until the slide is not animating, 
//at which time it will proceed to fire the script you want 

//The code below loops doing nothing if the element's animation is not complete. 
//or else once the animation is complete it does something and stops the loop. 
//This way jquery cycle's "after" event will call the onAfter function and get the variables, 
//for instance the current slide element (curr) or the current slide index (opts.currSlide) 
//from the after event and hold it until the animation is complete and the slide has changed. 

    for(i=0; i>0 i++){ 
    if($(elem).is(':animated')) { 
     //do nothing 
    } 
    else { 
     //do something now that animation is complete 
     break; 
    } 
    } 
}; 

上記のコードはテストされていません。

は、私は上記の変数、

現在のスライド要素、「CURR」と 現在のスライドのインデックスjQueryのサイクルオプションから、「opts.currSlide」

はhttp://jquery.malsup.com/cycle/options.htmlと reference-ました「console.log（opts）」を使用してGoogle Chromeコンソールからoptsの内容を確認します。

これが役に立ちます。