1

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

这是一个显示问题的 jfiddle：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',
});

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

4

1 回答 1

1

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

如果您真的想禁用控件，则必须连接到onPrevNextEvent:. 在另一个堆栈溢出问题中有一个优雅的解决方案。

他们使用控件顶部的透明块元素来在事件进行时禁用它们。签出最后的编辑并摆弄问题。

编辑：由于这条线，您遇到了奇怪的行为

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

进行回调检查并将其放在此动画调用之后。

于 2013-02-11T01:59:04.210 回答