需要幫助暫停/恢復淡入和淡出

Question

希望這是一個簡單的請求。我發現這個代碼完全適合我想做的事（在淡入淡出時旋轉列表項）http://jsfiddle.net/gaby/S5Cjm/1/。但是，我正在尋找將鼠標懸停在動畫上並在鼠標上恢復的動畫。目前，我是一個新手，用Javascript和JQuery，所以任何幫助，將不勝感激。

謝謝。

編輯：側面問題：使用JQuery來做這件事有沒有好處？一個獨立的腳本會更合適嗎？

Answer 1

我將懸停事件附加到您的列表項。 over函數使用jQuery.stop（true）停止動畫和所有後續動畫。該輸出功能恢復動畫：

http://jsfiddle.net/US4Fc/1/

var duration = 1000 
function InOut(elem) { 
    elem.delay(duration).fadeIn(duration).delay(duration).fadeOut(

    function() { 
     if (elem.next().length > 0) { 
      InOut(elem.next()); 
     } 
     else { 
      InOut(elem.siblings(':first')); 
     } 

    }); 
} 

$(function() { 
    $('#content li').hide().hover(
     function() { 
      $(this).stop(true) 
     }, 
     function() { 
      var curOp = Number($(this).css("opacity")); 
      $(this).fadeTo(duration*(1-curOp), 1, function() { 
       InOut($(this)) 
      }); 

     } 
    ); 
    InOut($('#content li:first')); 

}); 

Answer 2

Will this work for you？

$(function(){ 
    var active; 
    $('#content li').hide().hover(
     function(){ 
      active = $(this).stop(); 
     }, 
     function(){ 
      active && InOut(active); 
     } 
    ); 
    InOut($('#content li:first')); 

});