javascript - 如何替换 CSS3 过渡

Question

我正在尝试将 CSS 过渡应用到一个元素，但在它完成之前的某个时刻，完全删除过渡并开始另一个过渡。

This question回答了如何在其轨道上停止过渡，但我在那里修改了 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);

我想要发生的事情是让方框重置其位置并在单击时向下移动，并让完成的处理程序在第一次转换时不触发。

实际发生的是点击时框会重置其位置，但不会向下移动直到第一个转换完成(即使第一个转换的运动不再发生)。完成的处理程序仍然会在第一个转换时触发。

Answer 1

我已经用 clearQueue 方法更新了你的 fiddle :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);

这就是诀窍。参见 http://api.jquery.com/clearQueue/有关 clearQueue 方法的更多信息。