jquery懸停行動diappears時，去下div div

我新學習JQuery。我做了一個從JQuery新手到忍者的樣本，當我將鼠標移到下一個項目上時，我得到一個錯誤。 #navigation_blob消失它可能是我知道的所有css問題，但運行代碼告訴我你認爲我需要做什麼。即時通訊使用的寬鬆插件jquery懸停行動diappears時，去下div div

$(document).ready(function() { 

     $('<div id="navigation_blob"></div>').css({ 
      width: $('#navigation li:first a').width() + 10, 
      height: $('#navigation li:first a').height() + 10 
     }).appendTo('#navigation'); 

     $('#navigation a').hover(function() { 
      $('#navigation_blob').animate(
       { width: $(this).width() + 10, left: $(this).position().left }, 
       { duration: 'slow', easing: 'easeOutElastic', queue: false } 
      ) 
     }, function() { 
      $('#navigation_blob') 
       .stop(true) 
       .animate(
        {width: 'hide'}, 
        {duration: 'slow', easing: 'easeOutCirc', queue: false} 
       ) 
       .animate({ 
        left: $('#navigation li:first a').position().left }, 'fast' 
       );     
     }); 
    }); 


<style type="text/css"> 
    #navigation li 
    { 
     display:inline-block 
    } 
    #navigation_blob 
    { 
     background-color:Blue; position:absolute; float:left 
    }  
</style> 
<ul id="navigation"><li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Buy!</a></li><li><a href="#">Gift Ideas</a></li></ul>

來源

2010-12-23 ONYX

我覺得你的問題是在第二.hover()函數的第一個.animate()的width: 'hide'：

//... 
}, function() { 
    $('#navigation_blob') 
     .stop(true) 
     .animate(
      {width: 'hide'}, 
//...

我覺得你的斑點會，本質上，有display: none;一旦動畫完成所以對其寬度或位置的進一步處理將不會有明顯的效果。如果你說{width: 0}應該沒關係工作：http://jsfiddle.net/ambiguous/YaVzd/

您也可以嘗試之前，懸停在動畫中加入明確的.show()但產生一些奇怪的效果：http://jsfiddle.net/ambiguous/uH9yJ/1/

來源

2010-12-23 05:07:56

它看起來像jQuery的版本是罪魁禍首這裏。在this fiddle一切看起來很好（使用jQuery 1.4.2）。但是，如果將版本更改爲1.4.4（最新版本），則情況會變得異常怪異。另外，我從這本書下載了代碼，它看起來像這個示例使用1.4的jQuery版本。

如果作者的更新日誌是正確的，這是有意義的。根據plugin's website，最後一次更新是12/11/07，這可能意味着開發已停止，但至少可能意味着該插件已過時。

希望有所幫助。

來源

2010-12-23 05:10:32

jquery懸停行動diappears時，去下div div

回答

相關問題