Jquery切换(‘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/