Функция jquery animate работает, а затем отменяет ее изменение.

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

Когда событие происходит 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"); 
      } 
     });

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

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

Это приносит высоту контейнера обратно в 400px.

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

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

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

С уважением, sapatos

источник

2014-01-02 sapatos

Скорее вы получите помощь здесь, если разместите пример на http: // jsbin.com – m59

Ну, первая проблема, которую я вижу, заключается в том, что вы забыли удалить класс «анимация» во второй функции, это объясняет, почему ваша открытая анимация не работает во второй раз. в противном случае, я предлагаю загрузить ваш код в jsfiddle (или аналогичный сайт), чтобы мы могли видеть его лучше –

Да, я понял, что сам сейчас перед тем, как увидеть ваш комментарий. однако это не имело никакого значения, поскольку оно все еще не работало. Я удалил анимацию, и она работает нормально, поэтому я могу оставить ее как сейчас – sapatos

Я взял то, что вы имели положить его в plunker, который также включает в себя решение: 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 использовать две формы параметров анимации, где вторым параметром является объект с параметрами. См. Параметры подписи функции анимации на jquery animate page.

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

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

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

источник

2014-01-02 06:40:52

Функция jquery animate работает, а затем отменяет ее изменение.

ответ

Смежные вопросы