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循环选项reference- http://jquery.malsup.com/cycle/options.html和使用“console.log（opts）”通过我的谷歌Chrome控制台查看opts内部的内容。

希望这有帮助。

jQuery循环 - 在动画到下一张幻灯片之前完成'之前'功能

2 个答案: