Javascript 使用 jquery 进行连续运动动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4822524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
continuous movement animation with jquery
提问by nokiko
I would like to recreate the truck moments in the above site , It is done in mootools. How would I code this, is there a jQuery plugin to do this?
我想在上面的站点中重新创建卡车时刻，它是在 mootools 中完成的。我将如何编码，是否有 jQuery 插件可以做到这一点？
So animate an object from beginning to end of screen and then it starts over again. How would I do this jQuery
因此，从屏幕的开始到结束为对象设置动画，然后重新开始。我将如何做这个 jQuery
Any help will e appreciated
任何帮助将不胜感激
回答by Jason Benson
Here's a JSFiddle sample http://www.jsfiddle.net/XpAjZ/
这是一个 JSFiddle 示例http://www.jsfiddle.net/XpAjZ/
More on jQuery animate: http://api.jquery.com/animate/
更多关于 jQuery 动画：http: //api.jquery.com/animate/
Demonstration shows 2 boxes animated across the screen at different speeds etc. (See fiddle)
演示显示 2 个以不同速度在屏幕上动画的框等（见小提琴）
Relevant jQuery Code:
相关的 jQuery 代码：
var animateMe = function(targetElement, speed){
$(targetElement).css({left:'-200px'});
$(targetElement).animate(
{
'left': $(document).width() + 200
},
{
duration: speed,
complete: function(){
animateMe(this, speed);
}
}
);
};
animateMe($('#object1'), 5000);
animateMe($('#object2'), 3000);
回答by mVChr
Here's an example of the following code.
This is relatively simple with jQuery using the position:absoluteCSS property and the .animation()[DOCS]method callback. You will basically be animating the leftCSS property over a period of time within a named function, then call that function in the animation callback when the animation is complete, like so:
这对于使用position:absoluteCSS 属性和.animation()[DOCS]方法回调的jQuery 来说相对简单。您基本上将left在命名函数内在一段时间内为 CSS 属性设置动画，然后在动画完成时在动画回调中调用该函数，如下所示：
var animateTruck = function () {
$('#truck').css('left','-50px')
.animate({'left':$(window).width()},
4000,
'linear',
function(){
animateTruck();
});
};
animateTruck();
回答by Christian
If you have a div with a picture inside, like this:
如果你有一个里面有图片的div，像这样：
<div style="width: 1000px">
<img src="truck.png" id="truck" style="margin-left: -100px" />
</div>
Here is an jQuery example to slide the picture over the div/screen:
这是在 div/screen 上滑动图片的 jQuery 示例：
function moveTruck(){
$('#truck').animate(
{'margin-left': '1000px'},
3000, // Animation-duration
function(){
$('#truck').css('margin-left','-100px');
moveTruck();
});
}
moveTruck();
Hope that works out...
希望结果...
回答by John
How could you do this, yet have the content box slowly move back and forth across the width of the screen (not going through the screen and starting back at the other side)?
你怎么能做到这一点，但让内容框在屏幕的宽度上缓慢地来回移动（而不是穿过屏幕并从另一侧开始）？
