Высота jQuery при использовании stop () в анимации или slideUp / slideDown - PullRequest
Новая
       41

Высота jQuery при использовании stop () в анимации или slideUp / slideDown

2 голосов
/ 15 декабря 2009

У меня есть меню со скрытыми подменю.

Я анимирую подменю, чтобы оно открывалось при наведении мыши на элемент меню, и закрывалось при наведении мыши.

Когда пользователь перебирает множество пунктов меню, все анимации ставятся в очередь.

Чтобы исправить проблему с очередями, я добавил stop () перед анимацией.

Это вызвало еще более серьезную проблему с уменьшением высоты подменю до размера, в котором оно находилось при наведении мыши.

Ответы [ 5 ]

7 голосов
/ 15 декабря 2009

Решается установкой высоты на авто после завершения анимации закрытия. 

function leftMenuOut() {
    var obj = $(this).find(".toggleThisLevel2");
    if (obj.length == 0) {
        return true;
    }
    $(this).removeClass("opened");
    obj.stop().animate({ height: "hide" }, { queue: false, complete: function() { $(this).css("height", "auto"); } });
    return false;
}

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

1 голос
/ 12 мая 2012

Эта ошибка была исправлена ​​в jQuery 1.7.2: http://bugs.jquery.com/ticket/8685

0 голосов
/ 08 мая 2013

Поскольку я нашел этот вопрос через Google, и ни одно из этих исправлений не помогло мне, я должен упомянуть, как я решил мою проблему.

Вот мой оригинальный код: 

elem1.stop().slideUp();
elem2.find("div.page:nth-child(" + myVar + ")").stop().slideDown();

Это приводило к обрезанию высоты при быстром переключении назад и вперед.

Затем я добавил .hide() после .stop() на слайде 

elem1.stop().slideUp();
elem2.find("div.page:nth-child(" + myVar  + ")").stop().hide().slideDown();

И теперь высота не отскакивает и не обрезается. Надеюсь, это поможет кому-то в будущем!

0 голосов
/ 15 декабря 2009

Вы можете сохранить переменную для хранения информации, открыто ли меню или нет.

Когда вы наводите курсор мыши и открываете набор меню var menuOpening = true;, затем перезваниваете открытую анимацию, которая устанавливает menuOpening = false;, вы можете затем проверить, работает ли menuOpening, и открывать новый элемент меню только в том случае, если он имеет значение false.

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

0 голосов
/ 15 декабря 2009

Почему вы не используете функцию переключения? Я думаю, что вы должны установить высоту ваших элементов ul обратно к исходной высоте. На данный момент высота остается в атрибуте style, поэтому ваш ul имеет только высоту, на которую вы выделили мышь из элемента.

...