Question

在旋转木马上工作，我有动画和div包装工作，但是我想添加在悬停时停止旋转木马并在mouseout上重新启动动画的功能，但它只能工作一次。悬停停止动画，鼠标输出再次开始，但如果我再次悬停它就不会停止。

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 hover处理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处理程序中，以便您可以再次清除它。

动画在悬停时停止，从mouseout开始但不能再次悬停以重复停止动画

1 个答案: