Question

所以我有一个自定义过渡，一次动画各种元素。当用户快速点击下一个幻灯片按钮时（在动画完成之前），它会导致各种问题。我该如何解决这个问题？我尝试了一个在链接上添加/删除活动类但不起作用的想法。

这是一个显示问题的小问题：http://jsfiddle.net/SHRA6/12/

这是我的js：

$.fn.cycle.transitions.slideCustom = function($cont, $slides, opts) {
    $caption = $('.serverbig')
    $feature = $('.featurehol')
    $heading = $('h2')
    opts.fxFn = function(curr,next,opts,cb,fwd) {
        $feature.animate({ top: '350px' }, 500, opts.easing);
        $heading.animate({ left: '-550px' }, 500, opts.easing);
        $caption.animate({ right: '-550px' }, 500, opts.easing,  function() {
            $(curr).animate({ opacity: 0 }, 500, opts.easing, function() {
            });         
            $(next).css({ display: 'block'}).animate({ opacity: 1 }, 500, opts.easing);
            $feature.animate({ top: '66px' }, 500, opts.easing);
            $heading.animate({ left: '0' }, 500, opts.easing);
            $caption.animate({ right: '0px' }, 500, opts.easing, function() {
            if(cb) cb();
            });
        });
    }
}
 $('#sliderb').cycle({ 
    fx:     'slideCustom', 
    speed:  'slow', 
    timeout: 0, 
    next:   '.nextslide', 
    prev:   '.prevslide',
    easing: 'easeInOutBack',
    slideExpr: '.slide',
});

另一个问题导致背景（主幻灯片）闪烁，而不是使用不透明度动画淡入。

Answer 1

您可以尝试使用.stop()之前使用$feature.stop().animate(/* your code */)之类的动画。

如果您确实要禁用控件，则必须挂钩onPrevNextEvent:。在另一个stack overflow question中有一个优雅的解决方案。

他们在控件顶部使用透明块元素，以在事件进行时禁用它们。查看最后一次编辑并解决问题。

编辑：由于此行，您遇到了奇怪的行为

 $caption.animate({ right: '0px' }, 500, opts.easing, function() {
            if(cb) cb();
 });

进行回调检查并在此动画调用后立即进行。

jQuery Cycle - 一次停止循环多个幻灯片

1 个答案: