jQuery проблема позиционирования анимации слева направо - PullRequest
Новая
       7

jQuery проблема позиционирования анимации слева направо

1 голос
/ 19 февраля 2011

Я пытаюсь переместить 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;
    }

Спасибо заранее!

1 Ответ

3 голосов
/ 19 февраля 2011

Просто запустите анимацию с элементом вне экрана.

Таким образом, вам нужно установить левое поле равным отрицательной ширине элемента. 

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

демо : http://jsfiddle.net/gaby/XKVtC/

...