Question

我有一些jQuery将一些CSS转换应用于循环中的div。请参阅Demo他们在幻灯片放映中工作，因此我设法让它们彼此同步。

我想知道是否有一种方法可以点击单独的按钮，这些jQuery命令可以暂停，第二次点击会从他们停止时的位置恢复他们正在做的事情？

doIt();

function doIt(){
$('.title1').fadeIn('fast', function() {
$('div').addClass('animated pulse');
})
$('div').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend    
animationend', function() {
$('.title1').fadeOut(2000, function() {doIt();});
});
};

任何帮助都将不胜感激。

Answer 1

jquery's .stop()可能就是您所需要的，但要注意这一点：

＆＃34;如果在同一元素上调用多个动画方法，则后面的动画将放置在元素的效果队列中。这些动画直到第一个动画完成才会开始。调用.stop（）时，队列中的下一个动画会立即开始。＆＃34;

要恢复，你必须重新应用效果，通常是（例如你的fadeIn，它将从任何地方继续淡入）。

Answer 2

你在这里可以做的是，你可以解开那个div上的事件，这会使动画失败

   $('#btn').bind("click",function(e){

     $('div').unbind(); //Unbind Fadein,Fadeout events only if u have other events on this div
     $('.title1').unbind();

});

按钮HTML

<input type="button" id="btn" value="Stop this"></input>

小提琴

http://jsfiddle.net/86KLb/14/

单击按钮暂停jQuery

2 个答案: