2010-05-16 3 views
2

Я вызываю эти функции на onmouseover и onmouseout для нескольких div.Эффект слайда происходит слишком много раз

//Takes effect on divs with id, 62,63,64,65... 
function slide_it(id){ 

    $('#options_'+id).slideToggle('slow'); 

} 

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

Но я не могу понять, как я могу это сделать раз? Я могу установить переменную, но у меня есть несколько div, которые используют эта функция, и я не могу придумать простой способ сделать это, а не хранить вещи в массиве, но это беспорядочно!

Я очень ценю любую помощь в этом, что просто реализовать!

Спасибо всем за любую помощь

ответ

4

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

$('#options_'+id).stop(true).slideToggle('slow'); 

From the docs:

Когда .stop() вызывается на элемент, текущая анимация (если есть) немедленно останавливается. Если, например, элемент скрывается с .slideUp(), когда вызывается .stop(), элемент теперь будет отображаться, но будет составлять часть его предыдущей высоты. Функции обратного вызова не вызываются.

Пример: если вы быстро входите и выходите, я не дождался завершения его скольжения, он останавливает его и начинает выскакивать, как только мышь уходит.

+0

Спасибо, Nick, stop() очень полезно! :) – Abs

0

попытаться удалить свой OnMouseOver и onmouseout обработчиков из DIV, который скользил. Вы можете сделать это внутри slide_it(id) функций

0

Bind событий с jQuery сек one() метода: http://api.jquery.com/one/

+1

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

0

Это происходит потому, что все эффекты добавляются к эффектам очереди и играли один за другим.

Очистка этой очереди просто, добавьте clearQueue():

function slide_it(id){ 

    $('#options_'+id).clearQueue().slideToggle('slow'); 

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