Div在mouseover上展開和收縮？

我想提出一個下拉的jQuery動畫效果的菜單，Div在mouseover上展開和收縮？

var mexpand = false; 
function toggleMenu() { 
    if (!mexpand) { 
     $('jQuery selector').css({ "background": "url('Images/bnbgmenu.jpg') repeat-x top left" }); 
     $("#NavDiv").animate({ height: "200px" }); 
     mexpand = true; 
    } 
    else { 
     $("#NavDiv").animate({ height: "35px" }); 
     $('jQuery selector').css({ "background": "url('Images/bnbguser.jpg') repeat-x top left" }); 
     mexpand = false; 
    } 
}

請對此jsfiddle

我想懸停在菜單圖標，展開一看，我想，當鼠標離開收縮下拉式菜單。

但我面臨着mouseover和mouseout的問題，你可以在小提琴中看到它。

謝謝

來源

2014-10-02 Fahad Hussain

你可能想從小提琴刪除所有不相關的代碼，比如'myVar的= setInterval的（函數（）......'，似乎有根本不起作用， – leo 2014-10-02 06:08:49

我想你如果你使用showMenu和hideMenu函數代替toggleMenu，生活會更容易，因爲它們在不同的地方被調用，並且以一個簡單的例子開始，並且確保你理解它你小提琴包含許多不相關的東西這可能會讓你感到困惑。 – leo 2014-10-02 06:14:06

而不是調用該函數，您可以使用jQuery設置功能。給你的圖標圖像類icon，然後使用下面的jQuery。

$(".icon") 
    .mouseenter(function() { 
     $("#NavDiv").animate({ height: "200px" }); 
    } 
); 
$("#NavDiv") 
    .mouseleave(function() { 
     $(this).animate({ height: "35px" }); 
    } 
);

見http://jsfiddle.net/hp4jh9f7/4/

來源

2014-10-02 06:26:21 TeeDeJee