1

これは少し一般的な質問です。

要素 #elm に jQuery アニメーションがある場合は、それを停止できます。$('#elm').stop()

通常、アニメーションには適切な easeIn、easeOut があります (デフォルトの「swing」のように)。「stop()」を呼び出すと、その場ですぐに停止し、少し不格好に見えます。を呼び出す$('#elm').stop(true,true)と、アニメーションが終了点まですぐに終了します。

要素に「実行中のアニメーションを変更して、「すぐに」および「近くで」停止するように指示する一般的なアプローチはありますが、最初に定義されたeaseOutを使用しますか?

好奇心が強い、*-パイク

4

1 に答える 1

5

パイク、

「gentle_stop」を実行するための完全に一般的な方法を知りません。これは、どのように初期化されたかに関係なく、任意のアニメーションで動作します。

以下のコードは、事実上、jQuery 独自の.animate( properties, options )メソッドgentleStoppable()の 4 パラメータ バージョンである関数を定義します。追加の 2 つのパラメーターは、「穏やかな停止」フェーズを指定します。

関数は次のとおりです。

function gentleStoppable($jQ, animProps, animOptions, stopProps, stopOptions) {
    var namespace = 'gentleStop';
    var dfltStopOptions = {
        duration: 'slow',//override with stopOptions.duration .
        easing: 'easeOutCubic',//override with stopOptions.easing . (See also the safety check applied after extending dfltStopOptions below).
        queue: namespace
    };
    animProps = animProps || {};
    animOptions = animOptions || {};
    stopProps = stopProps || {};
    stopOptions = stopOptions || {};
    $jQ.each(function(i, elem) {
        var $elem = $(elem);
        function killCustomEvent() { $elem.off(namespace); }
        var C = $.Callbacks('once').add(killCustomEvent);
        if(animOptions.complete) {
            C.add(animOptions.complete);
        }
        animOptions.complete = C.fire;
        stopProps = $.extend({}, animProps, stopProps);
        stopOptions = $.extend({}, animOptions, dfltStopOptions, stopOptions);
        stopOptions.easing = ($.easing && $.easing[stopOptions.easing] ) ? stopOptions.easing : 'swing';//just in case what's specifified is unavailable.
        $elem.on(namespace, function() {//custom event
            killCustomEvent();
            C.remove(killCustomEvent);//prevent killCustomEvent being called twice.
            $elem.stop(true,false).animate(stopProps, stopOptions).dequeue(namespace);
        }).animate(animProps, animOptions);
    });
}

次のように、gentleStoppable アニメーションを開始します。

var animProps = {
    left: '300px'
};
var animOptions = {
    duration: 2000,
    complete: function() {
        console.log('complete');
    }
};
var stopProps = {
    left: '+=15px'
};
var stopOptions = {
    duration: 500,
};
gentleStoppable($e1, animProps, animOptions, stopProps, stopOptions);

次に、穏やかな停止を実行します。

$("#elem").trigger('gentleStop');

デモ

現状では、この機能は完璧ではなく、限られたテストしか行っていません。既知の問題/改善点は次のとおりです。

  • 方向: フォームの stopProps プロパティはxxx:+=15px、たとえ方向が間違っていたとしても、gentlestop フェーズで無条件に 15px を追加します。たとえば、対応する animProps プロパティが のxxx:30px場合+=15px、 のターゲット値が30px下から接近していると想定されます。同様に、 の値は-=15px、対応するターゲット値が上から接近していると仮定します。gentleStoppable() の改善により、各 stopProps プロパティが自動的に調整され、対応する animProps プロパティに下または上からアクセスできるようになります。

  • オーバーシュート: フォームの stopProps プロパティはxxx:+=15px、穏やかなアニメーションが対応する animProps プロパティで指定されている値を +15px 超える場合でも、穏やかな停止段階で無条件に 15px を追加します。これは、アニメーションが自然な終わり近くで停止した場合に発生する傾向があります。gentleStoppable() の改善により、各 stopProps のプロパティが対応する animProps プロパティを超えることを自動的に防止します。

  • 自動計算: 間違いなく改善されるのは、gentleStoppable() が animProps に基づいて自身の stopProps 値を計算することです。これにより、関数が一般的になり、使いやすくなり、正しく記述されていれば、方向とオーバーシュートの問題が効果的に修正されます。

  • もう少し考えれば、コードを jQuery プラグインとしてリファクタリングすることができます。これは、メソッドの連鎖を可能にし、やや不器用な.trigger(...)穏やかな停止を回避できるため、より便利です。

これが何かの役に立つなら、それを使ってください。

于 2012-11-20T03:08:13.797 に答える