jQuery при наведении анимации срабатывает несколько раз

Я пытаюсь понять, почему моя функция при наведении ведет себя странно. При наведении курсора на div становится видимым другой div. Однако, когда я перемещаю курсор вниз к div, который становится видимым, он исчезает и снова исчезает. Этого не должно происходить и должно просто оставаться видимым, пока мой курсор не покинет основной контейнер.

Вот мой код.

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

Здесь вы можете увидеть, как он появляется, а затем исчезает и снова появляется, когда вы наводите на него курсор.

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


jquery fadein fadeout jquery-hover
person MagentoMan    schedule 17.10.2014    source источник

Ответы (4)


arrow_upward
9
arrow_downward

Вы должны использовать функцию stop().

jQuery(function($) {

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

});

Кроме того, уменьшите поле .searchLinks, если вы не хотите, чтобы он исчезал, когда мышь находится между ним и его родителем. (padding-top вместо top)

(см. http://jsfiddle.net/421g2cdh/11/)

person FLX    schedule 17.10.2014
comment
Спасибо! Работал отлично. - person MagentoMan; 17.10.2014

arrow_upward
3
arrow_downward

Каждый раз, когда вы наводите курсор на элемент, вы должны останавливать текущую анимацию соответствующих элементов.

Используйте 1_

Пытаться:

 jQuery(function($) {

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

    });

ДЕМО

person laaposto    schedule 17.10.2014

arrow_upward
1
arrow_downward

Используйте stop(), и вы можете использовать обработчик метода наведения/вывода:

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

jsFiddle

fadeToggle()

person A. Wolff    schedule 17.10.2014
comment
+1 за fadeToogle, но -1 за отсутствие ответа на настоящий вопрос :) - person FLX; 17.10.2014
comment
Правильно, я даже не заметил этого, в отличие от вашего ответа;) - person A. Wolff; 17.10.2014

arrow_upward
0
arrow_downward

Ничто из вышеперечисленного не сработало для меня, но я нашел решение, которое срабатывает только один раз, используя .unbind():

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