Question

我已经应用了以下jquery：

$('.prev').on('mouseenter', function(){
        var $b = $('#banner img').parent('div');
        $b.animate({left: '-=100px'},1000);
    });

但如果我添加50000，这将动画最多1秒，然后它将动画长达50秒，但我想动画无限时间。我怎么能这样做？

Oooops！我的观念有点不对劲。当我们定义速度时，这将为对象设置动画，花费时间为1秒或50秒，但在我的情况下，当超过.prev时，对象$b应使用-=概念进行动画处理。

Answer 1

一种可能的方法是在CSS规则上定义animations，并使用jQuery事件，添加到您想要类的项目。

在动画的定义中，使用

animation-iteration-count: infinite

Answer 2

您应该使用css3关键帧动画。

以下是一个示例：http://jsfiddle.net/hQQSd/

@-webkit-keyframes rotate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

#rotate {
    width:256px;
    height:256px;
    -webkit-animation: rotate 3s linear infinite;
}

在这里，您可以找到有关语法的更多信息：http://css-tricks.com/snippets/css/keyframe-animation-syntax/

Answer 3

这是线性运动，但在结束后不会结束附加行为被触发

所以，换句话说，你不想让动画更慢（比如从1s到50s），但是在一个方向上以恒定速度动画它，对吗？

然后在动画后触发的回调函数中重新初始化动画：

var animate = function(){ 
        var $b = $('#banner img').parent('div');
        $b.stop().animate({left: '-=100px'},1000, 'linear', animate);
}
$('.prev').on('mouseenter', animate);

http://jsfiddle.net/KH4vS/

[编辑以回应评论]

要在mouseleave上停止动画，请使用

$('.prev')
.on('mouseenter', animate)
.on('mouseleave', function(){ $('#banner img').parent('div').stop(); });

http://jsfiddle.net/KH4vS/1/

如何为无限时间制作动画？

3 个答案: