动画在悬停时停止，在鼠标离开时开始，但不能再次悬停以重复停止动画

Animation stop on hover, begin on mouseout but can't hover again to repeat stop animation

本文关键字：动画 悬停 鼠标 离开 开始 但不能      更新时间：2023-09-26

在旋转木马上工作，我有动画和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')});}
              });

问题似乎是您订阅的事件不正确。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处理程序中，以便您可以再次清除它。

相关文章：