jquery.animate 只工作一次

Question

我有一个使用 .hover 旋转 360 度的图像，但是动画只会出现一次。这是一个 fiddle 。

Here's a little fiddle

我不确定如何解决这个问题，我认为这与动画本身已完成并需要重新启动有关。

$('#PSLogo').hover(function () {
    $('#PSLogo').animate({
        rotate: 360
    }, {
        step: function (now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
        },
        duration: 'slow'
    }, 'linear');
});

是旋转的代码

Answer 1

为什么不直接使用 CSS3 转换？对于简单的转换，Javascript 似乎有点重。

#PSLogo {
    width:0;
    height:0;
    position:relative;
    top:0px;
    left:0px;
    transition: all 0.5s linear;
}
#PSLogo:hover {
    -webkit-transform: rotate(360deg);
}

如果你想为他们所有人都使用它，你可以使用

.logo {
    transition: all 0.5s linear;
}
.logo:hover {
    -webkit-transform: rotate(360deg);
}

只需将 .logo 类添加到您想要的元素即可。

Fiddle