鼠标的扩张和收缩？

Question

我正在制作一个具有jquery动画效果的下拉菜单，

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;
    }
}

请看一下这个小提琴

我想在菜单图标上悬停以展开，当鼠标离开下拉菜单时，我想收缩。

但我面临的问题，鼠标和鼠标，你可以看到小提琴。

谢谢

Answer 1

您可以使用jQuery设置功能，而不是调用该函数。给您的图标图像类icon，然后使用下面的jQuery。

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

请参阅http://jsfiddle.net/hp4jh9f7/4/

Answer 2

您应该分别使用onmouseenter和onmouseleave事件而不是onmouseover和onmouseout。

看到这个小提琴手http://jsfiddle.net/hp4jh9f7/2/