Как сделать относительную анимацию с помощью Jquery при наведении курсора и наведении мыши? - PullRequest
Новая
       39

Как сделать относительную анимацию с помощью Jquery при наведении курсора и наведении мыши?

1 голос
/ 28 июня 2010

Я пытаюсь получить следующее:

В нижней части моей страницы установлен фиксированный элемент div. Когда мышь входит и выходит, div оживляет свою высоту до соотв. 100px и 50px. Высота по умолчанию составляет 50 пикселей.

Я обнаружил, что Jquery делает это правильно только с одним большим нет-нет. Когда мышь выходит из анимации, а затем снова входит, она либо:

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

b) сбрасывает текущую анимацию, что приводит к неожиданному поведению, например, исчезает div, изменяется на фиксированную высоту, которая блокируется или сбрасывается вверх и вниз между 100 и 50 пикселями.

Есть идеи по этому поводу?

Ответы [ 3 ]

1 голос
/ 28 июня 2010

Когда вы обрабатываете события mouseover и mouseout, вы должны использовать функцию stop () , чтобы очистить очередь анимации. Это позволит вам перейти к концу анимации (перед тем, как запустить другую), если это необходимо. Вы также можете очистить всю очередь анимаций.

Из документации API jQuery:

Полезность метода .stop () очевидна, когда нам нужно анимировать элемент на mouseenter и mouseleave: 

<div id="hoverme">
  Hover me
  <img id="hoverme" src="book.png" alt="" width="100" height="123" />
</div>

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

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});
0 голосов
/ 28 июня 2010

Единственное решение, которое я нашел для работы, - это дать анимации mouseenter и mouseexit ClearQueue () перед анимацией, но я думаю, что в некоторых случаях это может быть нежелательным.

В случае использования animate () это работает довольно хорошо, но с slideUp и другими анимациями JQuery по умолчанию это приводит к неправильному поведению.

0 голосов
/ 28 июня 2010

Вместо того, чтобы запускать событие анимации при каждом действии, как насчет наличия функции, которая постоянно опрашивает определенные переменные и действует соответственно - перемещая или не перемещая определенную (переменную) величину.Ваши события mouseover и mouseout будут затем изменять те переменные, которые опрашиваются, поэтому вам не придется беспокоиться о запуске сотен анимаций.Дайте мне знать, если я не имею смысла, чтобы я мог уточнить ..

...