幻灯片效果发生的次数太多了

Question

我在onmouseover和onmouseout上调用了几个div的函数。

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

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

}

问题在于，如果我将鼠标移动然后将鼠标移出，则再次将鼠标移开然后鼠标移出。如果我多次这样做，幻灯片效果发生的次数与我将鼠标移动到div之外的次数相同，正如预期的那样。

但我无法弄明白我怎么能一次？我可以设置一个变量，但我有几个这个函数被使用的div，我想不出一个简单的方法来做这个而不是把东西存放到一个数组中，但这很麻烦！

我非常感谢您提供的任何有助于实施的帮助！

感谢大家的帮助

Answer 1

在致电slideToggle()之前，请使用.stop(true)，这将结束当前动画（如果有的话），并且由于您正在进行链接，因此会立即启动您提供的动画，例如：

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

From the docs：

  

在元素上调用.stop()时，会立即停止当前运行的动画（如果有）。例如，如果在调用.slideUp()时隐藏了.stop()元素，则元素现在仍将显示，但将是其先前高度的一小部分。不调用回调函数。

示例：如果您快速进出，我不会等待完成滑动，它会停止它并在鼠标离开时立即滑出。

Answer 2

尝试从被滑动的div中删除你的onmouseover和onmouseout处理程序。你可以在slide_it(id)函数

中做到这一点

Answer 3

使用jQuery one()方法绑定事件：http://api.jquery.com/one/

Answer 4

这是因为所有效果都会添加到效果队列中并一个接一个地播放。

清除此队列很简单，只需添加clearQueue（）：

function slide_it(id){

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

}