Jquery toggle('slide') 只滑动一次

Question

我对 jquery 很陌生，所以如果我的问题太基本，请提前原谅我。我在悬停幻灯片效果方面遇到了一些问题，这似乎是 CSS 和 jquery 问题的混合。 当我将鼠标悬停在图像上时，它第一次很好地滑到图像的末尾，但随后似乎悬停效果第二次仅从第一个元素下方滑动一半，而不是从图像滑过结束。

我为此尝试了许多其他可能性，但到目前为止都没有运气，如果有人能指出我正确的方向，我将不胜感激:)

可以在这里找到我想要实现的示例

http://jsfiddle.net/robolist/rK4GD/

$('.proimg').hover(function(event) {
      $('.boxcaption',this).stop().toggle( 'slide' );
}).on('mouseleave',function(event) {
      $('.boxcaption',this).stop().toggle( 'slide' )});

提前非常感谢

Answer 1

当您在悬停时使用切换时，您不需要执行 mouseleave 事件。另请注意，stop 采用布尔参数，第一个用于清除队列，第二个用于跳转到结束：

只要做：

$('.proimg').hover(function(event) {
    $('.boxcaption',this).stop(true, true).toggle( 'slide' );
});

小提琴：http://jsfiddle.net/rK4GD/10/

见：http://api.jquery.com/stop/