-2

我应用了以下jquery：

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

但是，如果我添加 50000，这将动画最多 1 秒，然后它将动画最多 50 秒，但我想动画无限时间。我怎样才能做到这一点？

哎呀！我的概念有点错误。当我们定义速度时，这将使对象动起来需要 1 秒或 50 秒的时间，但在我的情况下， 应该用概念来.prev为对象设置动画。$b-=

4

3 回答 3

0

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

所以，换句话说，你不想让动画变慢（就像从 1 秒到 50 秒那样），而是以恒定的速度在一个方向上制作动画，对吧？

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

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/

于 2013-09-17T10:06:07.220 回答
0

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

在动画的定义中，使用

animation-iteration-count: infinite
于 2013-09-17T09:59:09.253 回答
0

您可能应该使用 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/

于 2013-09-17T10:01:16.313 回答