javascript - 如何在 jquery transit 中暂停和重新启动 css3 转换

Question

我正在使用 jquery transit 来移动和元素。我想暂停动画并单击按钮继续播放。但我不知道该怎么做。

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

我试过了

stop().transition({});

但是它抛出了一个错误。

Answer 1

您可以使用 clearQueue()停止动画

clearQueue() : Stop the remaining functions in the queue

jsFiddle here

HTML

<div class="box"></div>
<button id="restartTransition">Click Me</button>

CSS

.box{
    opacity: 0.8;
position: absolute;
left: 0;
top: 5%;
background: #505060;
border-radius: 1px;
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
margin: -16px 0 0 -16px;
width: 32px;
height: 32px;
z-index: 2;
}

jQuery

$(document).ready(function(){
    $("#restartTransition").on("click", function(){
        $('.box').clearQueue().transition({ x: '0px' },10);
        $('.box').transition({ x: '350px' },5000);
    });
});