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