如何在鼠标悬停时停止动画？

Question

我的页面中有一个滑块，我想让动画在鼠标悬停时停止，然后在鼠标不再存在时恢复。

我用.stop 命令尝试了一些东西，但没能成功。 有人可以帮帮我吗？

var $item = $('.carousel .item'); 
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight); 
$item.addClass('full-screen');

$('.carousel img').each(function() {
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  });
  $(this).remove();
});

$(window).on('resize', function (){
  $wHeight = $(window).height();
  $item.height($wHeight);
});

$('.carousel').carousel({
  interval: 2000,
  pause: "false"
});
$(this).stop(true);

Answer 1

在stop() 之前使用clearQueue() 删除所有排队的动画。

Answer 2

尝试使用它。

$('.carousel').hover(function () { 
  $(this).carousel('pause') 
}, function () { 
  $(this).carousel('cycle') 
})