2012-08-16 122 views
0

我想在遊標進入其父元素時動畫元素,並在鼠標退出元素時可靠地反轉該動畫 - 對於嵌套元素的多個級別。我可以用CSS(轉換不是選項)笨拙地做到這一點,但希望使用jQuery性感起來;)jquery使用jquery mouseenter - mouseleave

我試圖實現的一個例子是accordion menu這種類型,但正如我所說的jQuery的。

到目前爲止,我有tried using mouseenter and mouseleave爲同一個例子,但似乎無法讓它在第一次展開和合同後工作。

我該如何可靠且優雅地將此隱藏/顯示動畫綁定到一個mouseenter/mouseleave或類似的jQuery中?

回答

0

似乎工作

http://jsfiddle.net/sechou/Rce8A/2/

$(function(){ 
    //bind event 
    $("li.level1").mouseenter( 
    function(){ 
     // make sure the item would diplay 
     $(this).find("ul:first").find("li.level2").show(); 
     // do "show" 
     $(this).find("ul:first").show(500);  
    }); 

    $("li.level1").mouseleave(
     function() { 
     // do "hide" 
     $(this).find(":parent").hide(500); 
     } 
); 
}); 
+0

順便說一句,我選擇的jQuery 1.8(左列) – 2012-08-16 03:46:27

+0

嗯是的,它似乎工作,但看起來哈克。你能解釋它爲什麼有效嗎? – travega 2012-08-16 03:49:21

+0

最重要的是綁定事件 – 2012-08-16 03:54:05