Question

我使用了一个让图片旋转的类。

这个类看起来像

.zodiac_rotate {
    -webkit-animation:spin 15s linear infinite;
    -moz-animation:spin 15s linear infinite;
    animation:spin 15s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

我也尝试使用jquery进行旋转但在css中我已经看到它更流畅所以我决定只在css中进行。

现在，使用jquery我想在鼠标悬停在图片上时停止旋转。我做了一个小的JavaScript，它工作正常：

 $('#zodiac').hover(function(){
     $(this).removeClass('zodiac_rotate');
      },function(){
          $(this).addClass('zodiac_rotate');
       })

我遇到的麻烦就是位置，我希望当我们将鼠标移到图像上时，它会保持在它的位置，当我移除它时，它会像原来的位置一样，所以效果不是很好。

非常感谢任何帮助。

Answer 1

您可以使用animation-play-state作为

$('#zodiac').on('mouseover', function () {
    $(this).css('-webkit-animation-play-state','paused');
    $(this).css('animation-play-state','paused');
});

$('#zodiac').on('mouseout', function () {
    $(this).css('-webkit-animation-play-state','running');
    $(this).css('animation-play-state','running');
})

JSFiddle

Answer 2

用jquery旋转这样的东西：

$('#zodiac').hover(function(){
  $(this).css('transform','rotate(0deg)');
});

css，使用rotate和jquery到初始位置

2 个答案: