Javascript Jquery mouseover动画使用相同的元素

我花了很多时间尝试制作一个关于hove、mouseenter等的菜单，但是得到了与back动画的配合

我已经发布了我的代码和注释mouseout函数，如果它没有注释，那么它将无法工作，我需要建议，帮助如何取消注释这两行并使其工作

html

你需要这个吗

将

mouseover

和

mouseout

更改为

mouseenter

和

mouseleave

。请在此处查看更多信息：

将

高度：140px

添加到您的

#标题中

：

#header {
    margin: 0 auto;
    width: 100%;
    border: 0px solid black;
    height: 140px;
}

---

如果不将

height:140px

添加到标题中，则高度会根据标题中的内容进行收缩/包裹，在这种情况下，设置动画的

.navigation\u menu\u block

的高度=>会导致标题高度在动画期间快速变化，并可能导致鼠标位于标题之外=>会触发

mouseleave

功能。

使用图像占位符整理版本：谢谢！你帮了我很多。如果这对你来说不是那么难的话，我想再次问你一个小错误，当在mouseenter上（动画加载过程中）将其更改为mouseleave-cancel动画时会发生什么。在一个时间，它显示的标志和菜单，但如果不这样做你的代码是惊人的。在这里，我在你的代码中添加了一个图像来查看这些问题（bug）@Viktors:这个问题也与身高有关。因为菜单的高度+图像的高度>140px，这将扩展div。如果将#标题的高度设置为更大的值，如200px，则问题将消失。

$(document).ready(function () {
    $("#header").mouseover(function () {
        $(".logo_show").stop(false, true).animate({
            top: '-200px'
        }, 400);

        $('.navigation_menu_block').stop(false, true).delay(500).slideDown({
            duration: 500,
            easing: 'easeInSine'
        });
    }).mouseout(function () {
        $('.navigation_menu_block').slideUp({ duration: 200, easing: 'easeInSine'});
        $(".logo_show").animate({top: '0px'}, 700);
    });
});

$(document).ready(function() {

    $("#header").mouseenter(function(){
        $(".logo_show").stop(false, true).animate({top: '-200px'}, 400);

        $('.navigation_menu_block').stop(false, true).delay(500).slideDown({ duration: 500, easing: 'easeInSine'});

    }).mouseleave(function(){
        $('.navigation_menu_block').stop(false, true).slideUp({ duration: 200, easing: 'easeInSine'});
        $(".logo_show").stop(false, true).animate({top: '0px'}, 700);
    });
});

#header {
    margin: 0 auto;
    width: 100%;
    border: 0px solid black;
    height: 140px;
}