jQuery Cycle - 'before'函數在動畫到下一張幻燈片之前完成

我正在使用jQuery Cycle插件作爲滑塊 - 我需要在滑塊移動到下一張幻燈片之前單擊下一個鏈接時完成一項功能。jQuery Cycle - 'before'函數在動畫到下一張幻燈片之前完成

此刻，我無法看到反正在'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圖像動畫之前，改變和功能僅工作在第一點擊：/

來源

2011-03-07 tbwcf

似乎沒有辦法讓'下一個'函數通過插件方法等待'before'完成。

然而潛心鑽研cycle.js代碼，你可以推遲論文線下一個功能：

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線 - （不準確的，因爲我通過代碼添加了一些筆記/評論/的定製）。在這裏我添加了.delay（800），它可以提供所需的效果。

來源

2011-03-11 12:27:03 tbwcf

難道你不能只是調用一個單獨的函數，不會等待嗎？

$('#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; 
    } 
    } 
};

上述代碼未經過測試。

我得到了我上面提到的變量，

當前幻燈片元素，「電流」和當前幻燈片的指數，從jQuery循環選項「opts.currSlide」

參比http://jquery.malsup.com/cycle/options.html和通過使用「console.log（opts）」來查看我的Google Chrome控制檯中opts的內容。

希望這會有所幫助。

來源

2011-04-05 20:26:49 EMuentes

jQuery Cycle - 'before'函數在動畫到下一張幻燈片之前完成

回答

相關問題