2011-05-12 122 views
0

http://briancray.com/2009/05/06/twitter-style-alert-jquery-cs-php/中取出一些JQuery,應該給出一個很好的舊twitter風格的通知。Jquery在鼠標懸停上停止動畫

如何編輯下面的代碼來阻止div隱藏在鼠標懸停上?

更新:我仍然希望div在mouseover完成後滑動。

$(function() { 
    var $alert = $('#alert'); 
    if($alert.length) { 
     var alerttimer = window.setTimeout(function() { 
      $alert.trigger('click'); 
     }, 5000);  
     $alert.animate({height: $alert.css('line-height') || '50px'}, 200).click(function() { 
      window.clearTimeout(alerttimer); 
      $alert.animate({height: '0'}, 200); 
     }); 
    } 
}); 
+2

我是否正確地假設你已經在mouseover事件中的元素上嘗試了'.stop()'? – 2011-05-12 18:02:49

+0

什麼都沒有做,我試過幾件事但不停止 – bluedaniel 2011-05-12 18:04:10

+0

'.stop()'停止給定元素上的所有動畫,所以即使它是通過隱藏動畫的一半(btw爲什麼你不使用' slideUp()'?)它會停止死亡。那是你要的嗎? – 2011-05-12 18:05:36

回答

1

如果我理解正確(這我可能沒有),你想是這樣的:

var alerttimer, alertBox = $('#alert'); 
function resetTimeout() { 
     if (alerttimer) { 
       clearTimeout(alerttimer); 
     } 
     alerttimer = setTimeout(function() { 
       alertBox.trigger('click'); 
     }, 5000); 
} 
$(function() { 
     if(alertBox.length) { 
       resetTimeout(); 
       alertBox.animate({ height: alertBox.css('line-height') || '50px' }, 200).click(function() { 
         window.clearTimeout(alerttimer); 
         alertBox.animate({ height: '0px' }, 200); 
       }).mouseover(function() { 
         clearTimeout(alerttimer); 
       }).mouseout(function() { 
         resetTimeout(); 
       }); 
     } 
}); 

需要注意的是上面是非常未經測試是非常重要的。

+0

它不適合我,我不確定如何調試此代碼。 – bluedaniel 2011-05-12 18:33:56

+0

對不起,你有錯誤?這可能是一件非常明顯的事情,現在很累。 – 2011-05-12 18:34:45

+0

沒有錯誤只是不阻止動畫,如果你把它懸停在它上面 – bluedaniel 2011-05-12 18:37:05