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

Я стараюсь иметь следующее:Как сделать относительную анимацию с помощью JQuery для мыши и мыши?

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

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

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

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

Любые идеи по этому вопросу?

источник

2010-06-28 xaddict

Когда вы обрабатываете события 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(); 
});

источник

2010-06-28 15:29:30

Это то же поведение, что и clearQueue? – xaddict

Метод .stop() предназначен для использования только с анимациями. .clearQueue() также может использоваться для удаления любой функции, которая была добавлена в общую очередь jQuery с помощью метода .queue(). –

после проверки документов JQuery я бы сказал, что clearQueue, в случае animate(), совпадает с stop (true, false). Благодаря! – xaddict

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

источник

2010-06-28 15:29:36 Jeriko

- это не тот самый процессор?учитывая, что опрос даже срабатывает при просмотре другой вкладки или минимизации браузера. – xaddict

Зависит от того, как часто вы это делаете. Вы можете опросить каждые несколько секунд, и если есть задачи для управления, вы временно увеличиваете скорость опроса. Я не знаю, как лучший способ справиться с проблемой анимации-очереди, и это будет очень отзывчиво. Может быть, вызов 'stop()' в анимации может быть лучше - только мои 2 цента: P – Jeriko

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

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

источник

2010-06-28 15:35:20 xaddict

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

ответ

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