javascript - 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 接受 bool 参数，第一个用于清除队列，第二个用于跳转到结束:

只是做:

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

fiddle :http://jsfiddle.net/rK4GD/10/

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