动画在悬停时停止，从鼠标悬停开始，但是无法再次悬停以重复停止动画

Question

在转盘上工作时，我可以使用动画和div包装，但是我想添加以下功能：悬停时停止转盘，并在鼠标移开时重新启动动画，但是它只能工作一次。 悬停会停止动画，鼠标悬停会再次开始，但是如果我再次悬停它不会停止。

var roundabout = setInterval(function(){
        spin()
        }, 3000);
        function spin(){
            var kerosene = document.getElementById('carousel-frame-holder');
            var s = kerosene.offsetLeft;
                if (s >= -1700 ){
                    $("#carousel-frame-holder").animate({left: (s - 600 +'px')});
                    }
                else{
                    $("#carousel-frame-holder").animate({left: (s + 1800 +'px')});
                    }
                //  interruption
                $("#carousel-view-window" ).hover(function() {
                    $("#carousel-frame-holder").stop();
                    clearInterval(roundabout);  
                    });
                $("#carousel-view-window" ).mouseout(function() {
                    setInterval(function(){spin()}, 3000);
                    });
                };



              //wrap
              $('#nav-left').click(function(){
                  var kerosene = document.getElementById('carousel-frame-holder');
                  var s = kerosene.offsetLeft;
                  if (s <= -1 ){
                    $("#carousel-frame-holder").animate({left: (s + 600 +'px')});
                    }
                else {$("#carousel-frame-holder").animate({left: (s - 1800 +'px')});}

              });
              $('#nav-right').click(function(){
                  var kerosene = document.getElementById('carousel-frame-holder');
                  var s = kerosene.offsetLeft;
                  if (s >= -1700 ){
                    $("#carousel-frame-holder").animate({left: (s - 600 +'px')});
                    }
                else {$("#carousel-frame-holder").animate({left: (s + 1800 +'px')});}
              });

Answer 1

看来问题在于您订阅的活动有误。 jQuery悬停像这样处理mouseenter和mouseleave事件：

$('#carousel-view-window').hover(function(){
    //Stop Animation here
    $("#carousel-frame-holder").stop();
    clearInterval(roundabout);
  }, function(){
    //Restart Animation here
    roundabout = setInterval(function(){spin()}, 3000);
});

您无需单独订阅mouseout事件。

更新

确保将时间间隔ID存储在mouseleave处理程序中，以便可以再次清除它。