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 に答える