如何在jquery transit中暂停并重新启动css3转换

Question

我正在使用jquery transit来移动元素。我想暂停动画并点击按钮继续播放。但我无法弄清楚如何去做。

的jsfiddle：http://jsfiddle.net/b4hwq/2/

我曾尝试

stop().transition({}); 

但它抛出一个错误。

Answer 1

你是最那里与.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" 
    } 
}); 

Answer 2

您可以使用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); 
    }); 
}); 

Answer 3

我从中转库的完整功能更新小提琴：

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

jsfiddle

使用clearQueue时，完整的功能仍然是即使执行（）或停止（）