0

要素に CSS トランジションを適用しようとしていますが、完了する前のある時点で、トランジションを完全に削除して別のトランジションを開始します。

この質問は、そのトラックでトランジションを停止する方法に答えますが、問題を説明するために jsFiddle を変更しました。

http://jsfiddle.net/zXVLd/

var $div = $('div');
$div.click(function(){
    $div.css({
        left: 0,
        transition: 'none'
    });
    $div.transit({
        top: 600,
    },5000);
});

function complete(){
    $div.css('backgroundColor', 'blue');
}

$div.transit({left: 600}, 5000, 'linear', complete);

私がしたいのは、ボックスがその位置をリセットしてクリックすると下に移動し、最初のトランジションで完了したハンドラーが起動しないようにすることです。

クリックするとボックスの位置がリセットされますが、最初のトランジションが完了するまで下に移動しません (最初のトランジションからのモーションはもう発生していません)。完了したハンドラーは、最初の遷移でも起動します。

4

3 に答える 3

1

clearQueueメソッドでフィドルを更新しました： http://jsfiddle.net/zXVLd/1/

var $div = $('div');
$div.click(function(){
    $div.clearQueue().css('left', $div.css('left')).transit({
        top: 600,
    },5000);
});

function complete(){
    $div.css('backgroundColor', 'blue');
}

$div.transit({left: 600}, 5000, 'linear', complete);

それはトリックを行います。clearQueue メソッドの詳細については、http: //api.jquery.com/clearQueue/ を参照してください。

于 2013-08-26T21:18:31.183 に答える
0

使用するプラグインはキューを使用しています。したがって、$div.dequeue(); を呼び出すだけで十分です。いえ

var $div = $('div');
$div.click(function(){
    $div.dequeue();
    $div.css({
        left: 0,
        top: 0,
        transition: 'none'
    });
    $div.transit({
        top: 600,
    },5000);
});

function complete(){
    $div.css('backgroundColor', 'blue');
}

$div.transit({left: 600}, 5000, 'linear', complete);

フィドル - > http://jsfiddle.net/krasimir/zXVLd/2/

于 2013-08-26T21:21:30.790 に答える
0

この種のアニメーションを行うには、GSAP の TweenLite を試すことができます。それを使って達成できることは信じられないほどです。http://www.greensock.com/jump-start-js/これをページに含め、次のコードを追加する場合:

    div.bind('click', function(e) {
    // note that you can animate two directions, from and to
    TweenLite.from(div /*element*/, 0.2 /*easing in seconds*/, {
        // the css, but for positioning elements you can also use x and y.
        x: 600,
        easing: linear,
        onStart: function() {
            Stuff you want to do before the animation
        },
        onComplete: function() {
            Stuff you want to do after animationg
        }
    });
});
于 2013-08-26T21:11:16.547 に答える