Jquery mouseover animation the same element

Question

I have spend a lot of time trying to make a menu on hove, mouseenter and so on but get coflict with back animation.

I have posted my code and commented mouseout functions, if it uncommented then it will not work, I need advice , help how to uncommented these both lines and make it work !

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

Tidied-up version with an image placeholder: http://jsfiddle.net/isherwood/tj833/9 — isherwood, Dec 22 '13 at 02:02

score 1 · Accepted Answer · edited May 23 '17 at 11:56

Do you need this 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);
    });
});

Change mouseover and mouseout to mouseenter and mouseleave. Check out more information here: What is the difference between the mouseover and mouseenter events?

Add height:140px to your #header:

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

If you don't add height:140px to your header, the height shrinks/wraps based on the content inside, in this case the .navigation_menu_block's height which is animated => causes the header height changing rapidly during animation and may cause your mouse to be outside of the header => causes the mouseleave function to be triggered.

Thank you! You helped me a lot. If it is not so hard for you I would like to ask you once more about a small bug what happen when on mouseenter (while animation loading - in process) change it to mouseleave - cancel animation. In one time it shows logo and menu but if do not do such things your code is amazing. http://jsfiddle.net/kolxoznik1/tj833/14/ here I added an image to your code to see these problem (bug) — Viktors, Dec 22 '13 at 17:49
@Viktors: this problem is also height related. Because your menu's height + image's height >140px which expands the div. If you set the #header's height to a bigger value like 200px, you would see the problem disappears. — Khanh TO, Dec 23 '13 at 13:52

Jquery mouseover animation the same element

1 Answers1