Как использовать метод animate jquery для перемещения div вперед и назад

Я хочу сделать div анимировать горизонтально назад и вперед в определенной области. Проблема в том, что я не могу понять, как заставить мой 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>
9
jquery jquery-animate

5 ответов

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

animatethis.stop();

всегда будет сбой (что-то вроде "TypeError: не может вызвать метод"стоп " неопределенного"). Вы также смешиваете порядок анимации в 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/

7

вы пытаетесь это сделать? 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);​
7

попробовать этой скрипка

HTML-код

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

JS

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

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

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');
        }
    });
}
1

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

0