jquery.animate只工作一次

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

我不知道如何解决这个问题，我认为这与动画本身正在完成和需要重新启动有关，但是

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

---

旋转的代码为什么不使用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

类添加到所需的元素中

---

在这里，使用普通css将是更容易的方法，但如果您有充分的理由需要它，应该这样做：

var interval = "";

$('#PSLogo').hover(function () {
    interval = setInterval("animate()",1000);
});

$('#PSLogo').on("mouseleave", function () {
    clearInterval(interval);
});

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

---

我正在完成本关于你最初动画的回答。通过递归函数调用，可以实现更简单的操作：

function startingAnimation($el) {
    $el.animate({
        width: '100px',
        height: '100px',
        top: '0',
        left: '0'
    }, function() {
        $next = $el.next('img');
        if ($next.length) {
            startingAnimation($next);
        }
    });
}
$(document).ready(function () {
    startingAnimation($('#PSLogo'));
});

此外，如果您只想在

mouseenter

上播放动画，而不想在

mouseleave

上播放动画，则必须仅将

转换

规则添加到悬停中

---

在您的域中查看您的图像的访问受到限制，即使在Fiddle中提供。