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

Question

I have a slider in my page, and I would like to make the animation to stop on mouse hover, and then to resume when the mouse is not there anymore.

I tried something with the .stop command but I didn't manage to make it work. Can someone, please, help me?

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

Try to use this.

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