Question

我花了很多时间尝试在hove，mouseenter等上制作一个菜单，但是用背面动画制作了一个coflict。

我发布了我的代码并注释了mouseout函数，如果它取消注释然后它将无法工作，我需要建议，帮助如何取消注释这两行并使其工作！

HTML

<div id="header">
    <div class="navigation_menu_block">
        <div class="search_block">
            <div class="content">
                <div class="search_icon">Search</div>
                <div>
                    <input type="text" name="" />
                </div>
                <div class="close">X</div>
            </div>
        </div>
        <div class="menu_bg_line">
            <div class="content">
                <ul class="left">
                    <li><a href="#">somos</a>

                    </li>
                    <li><a href="#">somos</a>

                    </li>
                    <li><a href="#">somos</a>

                    </li>
                </ul> <a class="logo"><span class="slogan">logo</span></a>

                <ul class="right">
                    <li><a href="#">somos</a>

                    </li>
                    <li><a href="#">somos</a>

                    </li>
                    <li><a href="#">somos</a>

                    </li>
                    <li class="search" id="search">&nbsp;</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="logo_show">
        <div class="content">
            <img src="http://placehold.it/140x140" alt=""> <span>Menu</span>

        </div>
    </div>
</div>

的jQuery

$(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);
    });
});

Answer 1

您需要这个DEMO吗？

$(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);
    });
});

将mouseover和mouseout更改为mouseenter和mouseleave。点击此处查看更多信息：What is the difference between the mouseover and mouseenter events?

将height:140px添加到#header：

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

如果您没有在标题中添加height:140px，则高度会根据内部内容收缩/换行，在这种情况下，.navigation_menu_block的高度会被设置为动画= ＆GT;导致动画期间标题高度快速变化，并可能导致鼠标位于标题之外=＆gt;导致mouseleave函数被触发。

Jquery mouseover动画相同的元素

1 个答案: