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;
    }

提前Thanx！

Answer 1

只需使用屏幕外的元素启动动画。

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

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

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

jQuery从左到右动画定位问题

1 个答案: