jQuery on hover animation fires multiple times

Question

I am trying to figure out why my on hover function is acting weird. When you hover over a div, another div becomes visible. However, when I move my cursor down to the div that becomes visible, it fades out and fades back in again. This should not happen and should just stay visible until my cursor leaves the main container.

Here is my code.

HTML

<div id="searchWrapper" class="fleft">
    <div class="box">Hover here!</div>
    <div class="searchLinks" style="display: none;">
        <form id="search_mini_form" action="" method="get">
            <div class="form-search">
                <label for="search">Search:</label>
                <input id="search" type="text" name="q" value="" class="input-text" maxlength="128" autocomplete="off">
                <button type="submit" title="Search" class="button"><span><span>Search</span></span></button>
                <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
                <script type="text/javascript">
                    //<![CDATA[
                    var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
                    searchForm.initAutocomplete('http://removed.com/index.php/catalogsearch/ajax/suggest/', 'search_autocomplete');
                    //]]>
                </script>
            </div>
        </form>
    </div>
</div>

jQuery

<script type="text/javascript">
    jQuery(function($) {

        $("#searchWrapper").hover(
            function () {
                $(".searchLinks").fadeIn( 500 );
            },
            function () {
                $(".searchLinks").fadeOut( 500 );
            }
        );

    });
</script>

CSS

#searchWrapper {
    position:relative;
}

#searchWrapper .searchLinks {
    position: absolute;
    z-index: 99999;
    top: 50px;
    background: #e7e7e7;
    right: -145px;
    display:none;
    padding:10px;
}

#searchWrapper .box {
    border:solid 1px #555;
    padding: 20px 0px;
    text-align:center;
}

You can see here how it fades in and then fades out and back in once you hover over it.

http://jsfiddle.net/421g2cdh/7/

score 10 · Accepted Answer · answered Oct 17 '14 at 14:18

You must use the stop() function.

jQuery(function($) {

    $("#searchWrapper").hover(
        function () {
            $(".searchLinks").stop(true,true).fadeIn( 500 );
        },
        function () {
            $(".searchLinks").stop(true,true).fadeOut( 500 );
        }
    );

});

Also, reduce the margin of .searchLinks if you don't want to see it fadeOut when the mouse is between it and it's parent. (padding-top instead of top)

(see http://jsfiddle.net/421g2cdh/11/)

Thanks! Worked great. – SeniorDeveloper Oct 17 '14 at 14:25 — SeniorDeveloper, Oct 17 '14 at 14:25

score 3 · Answer 2 · answered Oct 17 '14 at 14:19

Every time you are hovering the element you must stop the currently-running animation on the matched elements.

Use stop()

Try:

 jQuery(function($) {

        $("#searchWrapper").hover(
            function () {
                $(".searchLinks").stop().fadeIn( 500 );
            },
            function () {
                $(".searchLinks").stop().fadeOut( 500 );
            }
        );

    });

DEMO

score 1 · Answer 3 · answered Oct 17 '14 at 14:20

1

Use stop() and you could use in/out hover method handler as it:

jQuery(function ($) {
    $("#searchWrapper").hover(
    function () {
        $(".searchLinks").stop().fadeToggle(500);
    });
});

jsFiddle

fadeToggle()

answered Oct 17 '14 at 14:20

A. Wolff

74,033
9
94
155

+1 For fadeToogle, but -1 for not answering the real question :) – FLX Oct 17 '14 at 14:26
Correct, i didn't even spotted that unlike in your answer ;) – A. Wolff Oct 17 '14 at 14:30

score 0 · Answer 4 · answered Nov 25 '17 at 04:43

0

None of the above worked for me but I found a solution that only fires once using .unbind():

$("#sidebar").unbind().on('mouseenter', function() {
    console.log('mouse entered sidebar');
});

answered Nov 25 '17 at 04:43

Cole

1,715
13
23

jQuery on hover animation fires multiple times

4 Answers4

Linked