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

【问题标题】：How to pause and restart a css3 transition in jquery transit如何在 jquery transit 中暂停和重新启动 css3 转换
【发布时间】：2013-11-10 02:28:53
【问题描述】：

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

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

我试过了

stop().transition({});

但它正在引发错误。

【问题讨论】：

标签： javascript jquery css css-transitions jquery-transit

【解决方案1】：

你可以使用clearQueue()来停止动画

clearQueue() : 停止队列中剩余的函数

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);
    });
});

【讨论】：

谢谢donovan，但我想暂停动画并从我暂停的地方继续。上面的代码不会暂停它。
我认为公交不可能。没有办法解决这个问题。也许使用 animate() 能够执行 stop()。

【解决方案2】：

我已经用运输库中的完整功能更新了小提琴：

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

jsfiddle

即使使用 clearQueue() 或 stop() 仍会执行完整函数

【讨论】：

【解决方案3】：

.stop() 的大部分时间你都在那里，我只是添加了一点逻辑来告诉它停止时该怎么做。

Working Example

$('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"
    }
});

【讨论】：