Question

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

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

$('#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

Answer 2

我正在完成Ben对你的初始动画的回答。使用递归函数调用可以做得更简单：

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上创建动画，则必须仅将transition规则添加到悬停中。

<强> jsFiddle Demo

Answer 3

在这里使用普通的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');
}

jquery.animate只工作一次

3 个答案: