Jquery slideToggle не открывается полностью после вызова остановки - PullRequest
Новая
       21

Jquery slideToggle не открывается полностью после вызова остановки

1 голос
/ 31 декабря 2011

У меня проблема с переключением анимации с помощью JQuery.У меня есть меню с подпунктами, которые открываются при наведении на основной пункт.Этого я могу добиться прекрасно, однако для длинного списка элементов я предпочел бы иметь возможность остановить открытие и закрыть меню, не дожидаясь завершения анимации slideDown (). 

$('.menubar-topitem').on('mouseenter',function(){
    $(this).children('.menubar-inner').stop(true).slideDown(); 
}).on('mouseleave',function(){
    $(this).children('.menubar-inner').stop(true).slideUp();
});

Этот код выполняет то, что мне нужно, однако, когда я снова наведу курсор мыши на элемент меню, подменю открывается только до того момента, когда анимация была достигнута до того, как я остановил его в первый раз.Кажется, что JQuery сохраняет высоту подменю с момента, когда анимация была остановлена ​​в первый раз, а затем открывается только до этого во второй раз.

Я знаю, что могу решить эту проблему с помощью stop (правда, правда) но это создает ужасный скачок в анимации.Могу ли я в любом случае предотвратить это поведение, не выполняя анимацию или обходные пути, чтобы пользователь не видел никаких переходов, а вместо этого видел текущую систему меню?

1 Ответ

3 голосов
/ 31 декабря 2011

Исправление для этого состоит в том, чтобы явно анимировать жестко закодированные значения, а не зависеть от функций slideUp / slideDown: 

$('.menubar-topitem').on('mouseenter',function(){
    var $this  = $(this),
        height = $this.children('.menubar-inner').children().height();
    $this.children('.menubar-inner').stop().animate({height : height}, 250); 
}).on('mouseleave',function(){
    $(this).children('.menubar-inner').stop().animate({height : 0}, 250);
});

Затем установить свойство CSS overflow на hiddenдля анимированных элементов.Также для динамического получения высоты элементов .menubar-inner вы можете вложить в них div и получить высоту этого элемента div:

HTML - 

<div class="menubar-topitem">
    <h1>This is a Menu Top Item</h1>
    <div class="menubar-inner">
        <div>
            <p>Some Content</p>
            <p>Some More Content</p>
        </div>
    </div>
</div>

CSS - 

.menubar-inner {
    overflow : hidden;
    height   : 0;
}

Вот демонстрационная версия: http://jsfiddle.net/n6h2S/

Вы столкнетесь с той же проблемой с fadeIn / fadeOut, но есть другая функция с именем fadeToэто позволяет вам явно установить непрозрачность для исчезновения.

...