Как я использую анимационный метод jquery, чтобы заставить div двигаться вперед и назад

Question

Я хочу сделать анимацию по горизонтали взад и вперед в определенной области.Проблема, которая у меня есть сейчас, заключается в том, что я не могу понять, как заставить мой div двигаться назад после того, как он продвинулся вперед.

Вот скрипт, который я использую:

  <script type="text/javascript">
    var animatethis = function (targetElement, speed) {
        $(targetElement).animate(
            {
                marginLeft: "+=250px"
            },
            {
                duration: speed,
                complete: function () {
                    animatethis(this, speed);
                    animatethis.stop();
                    $(targetElement).animate({ marginLeft: "-=250px" });
                }
            }
                    )
    };
    animatethis($('#q1'), 5000);
</script> 

Answer 1

Посмотрите в консоли браузера.animatethis ничего не возвращает, что означает, что строка

animatethis.stop();

всегда будет аварийно завершать работу (что-то вроде «TypeError: Невозможно вызвать метод stop из undefined))Вы также смешиваете порядок анимации в complete обратном вызове.

Остановитесь, вдохните и подумайте о том, что на самом деле делает ваш код выше.поэтому после увеличения marginLeft вы хотите уменьшить его. Тогда Вы хотите начать все сначала.Правильно?Итак:

function animatethis(targetElement, speed) {
    $(targetElement).animate({ marginLeft: "+=250px"},
    {
        duration: speed,
        complete: function ()
        {
            targetElement.animate({ marginLeft: "-=250px" },
            {
                duration: speed,
                complete: function ()
                {
                    animatethis(targetElement, speed);
                }
            });
        }
    });
};

animatethis($('#q1'), 5000);

Есть много других способов снять шкуру с этой кошки, но это работает.http://jsfiddle.net/mattball/rKu6Y/

Answer 2

Вы пытаетесь это сделать? http://jsfiddle.net/vwH6R/2/

setInterval(function(){
    $("div").stop(true,true).animate({left: 300}, 1000, 
          function(){ $(this).stop(true,true).animate({left: 0}, 1000); 
    });
}, 2000);​

Answer 3

Попробуйте это скрипка

HTML

<div class="myDiv">A Div</div>​

JS

$('.myDiv').animate({
   'margin-left':'50px'
}, 500, function(e){
$('.myDiv').animate({
    'margin-left':'0px'
}, 500)});​

Answer 4

Если вы собираетесь перемещать его назад и вперед несколько раз, вы можете заключить его в функцию, которая сама вызывает.Как то так:

function wobble(selector, amount, times, intSpeed) {

    var string = String($(selector).css("marginLeft")).replace("px", ""),
    leftMargin = parseInt(string, 10);

    $(selector).animate({ marginLeft: (leftMargin + amount) + 'px' }, intSpeed, function () {
        if (times > 0) {
            wobble(selector, -amount, --times, intSpeed);
        } else {
            $(selector).css("marginLeft", leftMargin + 'px');
        }
    });
}

Answer 5

Используйте метод jQuery queue() для цепочки событий: http://api.jquery.com/queue/