Question

continuous movement

我想在上面的网站重新创建卡车时刻，它是在mootools中完成的。我将如何编写代码，是否有一个jQuery插件来执行此操作？

然后从屏幕的开头到结尾为对象设置动画，然后重新开始。我该怎么做这个jQuery

任何帮助都将受到赞赏

Answer 1

这是一个JSFiddle示例http://www.jsfiddle.net/XpAjZ/

有关jQuery animate的更多信息：http://api.jquery.com/animate/

演示显示在屏幕上以不同的速度等动画的2个框（参见小提琴）

相关的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);

Answer 2

<强> Here's an example of the following code.

使用position:absolute CSS属性和.animation() ^[DOCS]方法回调，jQuery相对简单。您将基本上在命名函数中的一段时间内为left CSS属性设置动画，然后在动画完成时在动画回调中调用该函数，如下所示：

var animateTruck = function () {

    $('#truck').css('left','-50px')
               .animate({'left':$(window).width()},
                        4000,
                        'linear',
                        function(){
                            animateTruck();
                        });
};

animateTruck();

Answer 3

如果你的div里面有一张图片，就像这样：

<div style="width: 1000px">
<img src="truck.png" id="truck" style="margin-left: -100px" />
</div>

这是一个jQuery示例，用于在div / screen上滑动图片：

function moveTruck(){
    $('#truck').animate(
        {'margin-left': '1000px'}, 
        3000, // Animation-duration
        function(){
            $('#truck').css('margin-left','-100px');
            moveTruck();
        });
    }

moveTruck();

希望能解决...

Answer 4

你怎么能这样做，但内容框在屏幕的宽度上缓慢前后移动（不通过屏幕并从另一侧开始）？

用jquery连续运动动画

4 个答案: