jQuery Cycle - “之前”在动画播放到下一张幻灯片之前要完成的函数

Question

我正在使用滑块的 jQuery Cycle 插件 - 在滑块移动到下一张幻灯片之前单击下一个链接时，我需要完成一个功能。

目前，我无法阻止在“之前”功能完成之前触发下一个操作。我正在使用下面的代码。

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

但这会导致一些奇怪的行为，幻灯片背景图像在动画之前发生变化，并且该功能仅在第一次单击时起作用：/

Answer 1

“下一个”函数似乎无法通过插件方法等待“之前”完成。

然而，深入研究 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) ，它给出了所需的效果。

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”和
当前幻灯片的索引，“opts.currSlide”

来自 jquery 循环选项参考 - http://jquery。 malsup.com/cycle/options.html 和
通过使用“console.log(opts)”通过我的 Google Chrome 控制台查看 opts 内部的内容。

希望这有帮助。