javascript - 当鼠标悬停在元素JS或Jquery中时循环

当鼠标悬停在元素中时，我需要动画，但是当用户将mouseout悬停在元素中时，动画将在本地电流中停止。

        countRotate = 0;
        adiciona = true;
        $('.circulo-left').mouseenter(function(){
            $('#circuloprincipalcomabaazulclaro').css('transform', 'rotate('+countRotate+'deg)');
            if(adiciona == true){
                countRotate++;
                if(countRotate == 360){
                    adiciona = false;
                }
            }else{
                countRotate = countRotate - 1;
                 if(countRotate == 0){
                    adiciona = true;
                }
            }
        });
        // I thought of something like that.

.circle{
      width:200px;
      height:200px;
      border-radius:50%;
      border
    }
    .circle:hover{
        #circuloprincipalcomabaazulclaro{
            @include animation(rotate 3s infinite alternate);
        }
    }
    @keyframes rotate {
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }
    /* But when I remove the mouse it returns to the starting point. */

<div class="circle"></div>

最佳答案

更新：添加了一些JS以获取所需的输出。

您不需要jquery或js即可获得此效果。这是您需要做的。

稍微编辑了一下代码。

const circle = document.querySelector('.circle');

circle.onmouseover = function(){
  this.style.animation = 'rotate 1.5s infinite linear';
  this.style.webkitAnimationPlayState="running";
}

circle.onmouseout = function(){
    this.style.webkitAnimationPlayState="paused";
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: red;
  position: relative;
  cursor: pointer;
}

span {
  width: 5px;
  height: 30px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -5px;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="circle"><span></span></div>