Почему эта анимация jQuery прыгает вверх и вниз?

Question

Javascript:

jQuery(function() {
jQuery("#showquickfind").mouseover( function() {
    jQuery("#quickfind").animate({height:"show",opacity:"show"},"slow");
        return false;
    });
    jQuery("#quickfind").hover( function() {},
        function() { $("#quickfind").animate({opacity:1.0},1125).slideUp(375);
        return false;
    });
});

HTML:

<a href="" id="showquickfind">show me</a>

<div id="quickfind">
    <ul>
        <li>test</li>
        <li>test2</li>
        <li>test3</li>
    </ul>
</div>

CSS более или менее не имеет значения. Как мне остановить прыжки?

Answer 1

Возможно, вы захотите посмотреть цепочку команды jQuery.stop () перед каждой командой animate. Останавливает все запущенные анимации на указанных элементах. т.е.

jQuery("#quickfind").stop().animate({ 
    height:"200px", opacity: 1},"slow"); 
    return false;

Есть ли причина, по которой вы используете jQuery вместо сокращения $ для объекта jQuery? вы можете использовать сокращенное обозначение $ для объекта jQuery, даже если используете другие библиотеки, которые его используют, следуя этому шаблону -

(function($) {

//Your code here using $ shorthand for jQuery :)

})(jQuery);

Это означает, что $ в области видимости внешней функции является ссылкой для объекта jQuery.

Я настроил ваш код на этой странице примера . Если вы хотите изменить его, добавьте «/ edit» в URL.

Кроме того, Вы уверены, что «show» является допустимым значением для высоты и непрозрачности?

Насколько я понимаю, высота должна быть установлена ​​либо на авто (т.е. размер содержащего блока), либо на длину или в процентах относительно содержащего блока, а непрозрачность должна быть значение между 0 и 1 (jQuery абстрагирует различия между браузерами и будет использовать любой атрибут непрозрачности , т.е. opacity или filter: alpha (opacity))

Answer 2

Возможно, вы захотите использовать событие mouseenter, а не mouseover.

Разница описана в документации jQuery .

При наведении курсора срабатывает, когда указатель перемещается в или из дочернего элемента , а mouseenter - нет.

Есть также пример, как его использовать, вы должны использовать функцию bind().

Редактировать

В конце концов, лучшим решением может быть использование hover(), как упомянул Расс Кэм в комментариях.

КСТАТИ

Вы регистрируете указатель наведения несколько раз, каждый раз, когда вы переходите по ссылке "покажи мне".

Answer 3

У вас та же проблема, что и я. Происходит то, что происходит ваше событие при наведении курсора, быстрый поиск перемещается вверх, но затем он исчезает, поэтому снова отображается, и т. Д., И т. Д., И т. Д.

Единственный способ остановить прыжок - это сохранить высоту, установленную для элемента контейнера, чтобы она всегда оставалась на этой высоте.