Функция JQuery Animate работает, а затем меняет его

0

У меня есть контейнер div со списком внутри. Список довольно большой, поэтому я ограничил высоту контейнера до 400 пикселей до появления события mouseover.

Когда происходит событие mouseover, я запускаю следующий jquery

        $(".home-sidewidt").mouseover(function(){               

            if (!$(".home-sidewidt").hasClass("animation-run")) {
                $(".home-sidewidt").css("overflow", "visible");
                $(".home-sidewidt").animate({height:"1200px", queue: false},2000);
                $(".home-sidewidt").toggleClass("animation-run");
            }
        });

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

        $('html').click(function() {
            if ($(".home-sidewidt").hasClass("animation-run")) {
                $(".home-sidewidt").animate({height:"400px", queue: false},2000);
                $(".home-sidewidt").css("overflow", "hidden");
            }
        });

Это возвращает высоту контейнера до 400 пикселей.

Теперь обе эти части кода, похоже, работают, за исключением того, что пользователь отключается от списка, и он возвращается назад до 400 пикселей, примерно через 3/4 секунды он откатывается до 1200 пикселей. Тот факт, что продолжительность до его возврата назад примерно такая же, как указано в анимации, я думал, что анимация "открытого списка" снова запущена, но это не похоже на случай отладки.

Я экспериментировал, и если я нажимаю на страницу (не список) в 2 или 3 раза до того, как перераспределение списка напрямую связано с количеством раз, когда я нажал. т.е. если я нажимаю 2 раза, это занимает около 8 секунд, 3 раза 12 секунд и т.д. Это кратное длительности анимации.

Я собирался сделать jsfiddle для этого, но в списке используется плагин superfish, и есть количество необходимых файлов css и.js, и это показалось довольно сложным.

С уважением, сапатос

  • 0
    Скорее всего, вы получите помощь, если разместите пример на jsbin.com
  • 0
    Ну, первая проблема, которую я вижу, это то, что вы забыли удалить класс «animation-run» во второй функции, это объясняет, почему ваша открытая анимация не запускается во второй раз. в противном случае я предлагаю загрузить ваш код в jsfiddle (или аналогичный сайт), чтобы мы могли лучше его увидеть
Показать ещё 1 комментарий
Теги:
animation

1 ответ

1
Лучший ответ

Я взял то, что вы положили в плункер, который также включает в себя решение: http://plnkr.co/edit/41eE6o?p=preview

Первое, что нужно изменить, вы должны использовать различную сигнатуру функции для анимации для использования очереди: false.

Эта:

$(".home-sidewidt").animate({height:"1200px", queue: false},2000);

Нужно изменить на это:

$(".home-sidewidt").animate({height:"1200px"}, {queue: false, duration: 2000});

Ваше включение очереди: false в первом параметре будет неправильной частью. Чтобы по-прежнему включать очередь: false использовать две формы параметров анимации, где вторым параметром является объект с параметрами. См. Параметры подписи функции анимации на странице анимации jquery.

Во-вторых, анимация, когда это делается, меняет стиль перезаписи CSS на видимый, который вы можете обойти, добавив свой код, чтобы изменить стиль стилей перезаписи на скрытый в полный обратный вызов, который запускается, когда выполняется анимация, как это:

var animateOptions = {
    queue: false,
    duration: 2000,
    complete: function() {
      $(this).css("overflow", "hidden");
    }
};
$(".home-sidewidt").animate({height:"200px"}, animateOptions);

Как я уже упоминал, весь этот код подробно описан в плункере, и я надеюсь, что он близок к тому, что вы ищете, но по крайней мере его нужно легко настроить. Мне пришлось изменить некоторые высоты в анимации, чтобы было легче отображать их внутри плункера. http://plnkr.co/edit/41eE6o?p=preview

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню