在鼠标悬停暂停jquery动画

Question

我正在使用jquery脚本淡入淡出一大堆<p>....</p>标签，它工作正常，但我需要动画来暂停鼠标悬停和恢复鼠标！有没有我可以添加到脚本来处理这个问题的方法？

jQuery脚本：

$(function() { 
    function InOut(elem) 
     { 
     elem.delay() 
     .fadeIn(600) 
     .delay(5000) 
     .fadeOut(600, 
      function(){ 
       if(elem.next().length > 0) 
        { InOut(elem.next()); } 
       else 
        { InOut(elem.siblings(':first')); } 

     } 
    ); 
} 

$('#anidiv p').hide(); 
InOut($('#anidiv p:first')); 
}); 

HTML

<div id="anidiv"> 
<p>Pause jquery animation on mouseover...</p> 
<p>Pause jquery animation on mouseover...</p> 
<p>Pause jquery animation on mouseover...</p> 
<p>Pause jquery animation on mouseover...</p> 
</div> 

http://jsfiddle.net/EDbjw/

Answer 1

而不是检查的知名度，继续，你可以把一些 类或任何适合你区分当前显示元素来自其他人。

$('#anidiv p').hide(); 
InOut($('#anidiv p:first')); 

function InOut(elem) { 
    elem.delay().fadeIn(600).delay(5000).fadeOut(600, function() { 
     if (elem.next().length > 0) { 
      InOut($(this).next()); 
     } 
     else { 
      InOut($(this).siblings(':first')); 
     } 

    }); 
} 

$('#anidiv p').mouseover(function() { 
    $(this).stop(true, true); 
}); 
$('#anidiv p').mouseout(function() { 
    if ($(this).is(":visible") == true) { 
     InOut($(this)); 
    } 
}); 

stop animation on mouseover

Answer 2

This plugin会给jQuery的暂停和恢复单个动画的功能。为了暂停一系列动画，zdrsh的答案应该没问题。