當鼠標懸停在元素JS或Jquery中時循環

Question

當鼠標懸停在元素中時，我需要動畫，但是當用戶使鼠標懸停時，動畫停止在本地當前。

 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>

Answer 1

更新：增加了一些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>

Answer 2

我已經建立在@hunzaboy的回答中，OP表示，他希望動畫，以保持它的狀態，所以我做了一些調整，也取得了旋線性的。

自旋會留是你離開它999999999秒（約有277小時）

.circle{ 
 
     width:200px; 
 
     height:200px; 
 
     border-radius:50%; 
 
     background: red; 
 
     position: relative; 
 
     transition-property: transform; 
 
     transition-duration: 2s; 
 
     transition-delay: 999999999s; 
 
     transition-timing-function: linear; 
 
    } 
 
span{ 
 
    width: 10px; 
 
    height: 40px; 
 
    background: #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    } 
 
    .circle:hover{ 
 
     transform: rotate(360deg); 
 
     transition-delay: 0s; 
 
    } 
 
    /* But when I remove the mouse it returns to the starting point. */

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