Javascript 如何在jquery传输中暂停和重新启动css3转换

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

JSFiddle：

我确实试过了

stop().transition({});

但是它抛出了一个错误。

您可以使用停止动画

clearQueue（）：停止队列中的其余函数

HTML

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

jQuery

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

---

你用

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

---

我已使用transit库中的完整功能更新了小提琴：

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

---

即使在使用clearQueue（）或stop（）时，完整的函数仍然会执行。

谢谢你，多诺万，但我想暂停动画并从暂停的地方继续。上面的代码将不会暂停。我认为这是不可能的过境。没有办法解决这个问题。可以使用animate（）执行stop（）。

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