javascript - jquery トランジットで css3 トランジションを一時停止して再開する方法

Question

jquery トランジットを使用して要素を移動しています。アニメーションを一時停止し、ボタンをクリックして続行したい。しかし、私はそれを行う方法を理解することができません。

JSFiddle : http://jsfiddle.net/b4hwq/2/

私は試しました

stop().transition({});

しかし、それはエラーを投げています。

Answer 1

トランジット ライブラリの完全な関数でフィドルを更新しました。

$('.box').transition({
            x: '350px',
            duration: 5000,
            complete: function() {
                alert("complete!");
            }
        });

jsfiddle

clearQueue() または stop() を使用しても、完全な関数が実行されます。

Answer 2

停止したときに.stop()何をすべきかを伝えるための小さなロジックを追加しただけです。

実施例

$('button').click(function () {
    if (!$('.box').hasClass('stop')) { // if the box does not have class "stop"
        $('.box').stop().transition({  // stop the transition
            x: $('.box').offset().left + $('.box').width() / 2  // where the box should be when it stops
        }, 1).addClass('stop'); // simple add class for easy button control  
    } else { // if the box has class "stop"
        $('.box').transition({
            x: '350px' 
        }, 5000).removeClass('stop'); // continue with regularly scheduled programming then remove "stop"
    }
});