jQuery从左到右动画定位问题

Question

我试图将 div 从屏幕的一端滑动到另一端，但我试图使其循环，这样一旦它到达右侧，它将再次从左侧开始，依此类推。 ..

我现在遇到的问题是，一旦元素到达右侧，它就会循环，但该元素只是在左上角弹出，因为我希望它从浏览器窗口的外部移入，以给出它的无缝效果，这是我的代码，

Javascript/jQuery：

$(document).ready(function(){
    var body_width;
    var timer;

    jQuery(function($) {
            timer = setTimeout(Cloud, 0);
    });

    function Cloud() {
        //get the width of the body
        body_width = $("body").width();

        $("#move_me").css({margin:0}).
                animate({marginLeft: body_width}, body_width*5, "linear", function() {
                        timer = setTimeout(Cloud, 0);
                });
    }
});

HTML：

<div id="header">
    <div id="move_me"></div>
</div>

CSS：

   #header {
        width: 100%;
        height: 250px;
        background: #000;
        overflow: hidden;
   }

    #move_me {
        height: 250px;
        width: 250px;
        background: #F00;
    }

提前谢谢！

Answer 1

只需在元素离开屏幕的情况下启动动画即可。

因此，您需要将其左边距设置为等于元素的负宽度。

    var cloud_width = -$('#move_me').width();
    $("#move_me").css({marginLeft:cloud_width}).
                 .animate(...);

演示： http://jsfiddle.net/gaby/XKVtC/