jQuery .fadeIn（）不按預期方式工作

Question

我有下面的代碼顯示子菜單。我希望子菜單淡入鼠標懸停，但它不褪色的 - 它只是立即顯示子菜單：

jQuery("ul li").mouseover(function() { 
    jQuery(this).fadeIn(1000, function() { 
     jQuery(this).find('ul').css('right','0px').css('top','24px'); 
    }); 
}).mouseout(function(){ 
    jQuery(this).find('ul').css('right','-1000px'); 
}); 

感謝

Answer 1

首先這個問題，什麼也沒有褪色，因爲你想淡入淡出<li>你正在，而不是它下面的<ul>，它已經可見。然後，您將在淡入淡出回調中移動它，這意味着在淡入淡出完成（並且淡入淡出不會發生）之後，它在屏幕上移動。

對於修復：這裏有幾件事，首先你可能需要mouseeneter和mouseleave（在進入/離開子元素時不會觸發）。您可以通過使用.hover()進一步縮短它，但由於您只是定位和隱藏/顯示，只需執行隱藏/顯示，無需重新定位。另外，請確保你正在將<ul>放在你所在的地方，而不是你正在使用的<li>。這裏的整體外觀：

jQuery("ul li ul").hide().css({ right: 0, top: 24 }); 
jQuery("ul li").hover(function() { 
    jQuery(this).find('ul').fadeIn(1000); //possibly .children('ul') instead 
}, function(){ 
    jQuery(this).find('ul').hide(); 
}); 

它使用的.css()對象overrload，縮短了一點。但是，你可能只是有這個在CSS中開始：

ul li ul { right: 0; top: 24; display: none; } 

然後你可以只刪除第一行：jQuery("ul li ul").hide().css({right:0,top:24});