CODEWITHSUNDEEP
jqueryjquery-animate
user798774
user798774

Reputation: 413

How do I use jquery's animate method to make a div move back and forth

I want to make a div animate horizontally back and forth within a certain area. The problem I have right now is that I can't figure out how to make my div move back after it has moved forward.

Here is the script that I am using:

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

Upvotes: 10

Views: 12487

Answers (5)

Christofer Eliasson
Christofer Eliasson

Reputation: 33875

If you are going to move it back-and-forth for a number of times, you could wrap it up into a function, that calls itself. Something like this:

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

Upvotes: 1

The Alpha
The Alpha

Reputation: 146269

Try this fiddle

HTML

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

JS

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

Upvotes: 3

Cheery
Cheery

Reputation: 16214

Are you trying to do this? 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);​

Upvotes: 8

Matt Ball
Matt Ball

Reputation: 360046

Look in your browser console. animatethis does not return anything, which means that the line

animatethis.stop();

is always going to crash (something like "TypeError: Cannot call method 'stop' of undefined"). You're also mixing up the order of the animations in the complete callback.

Stop, breathe, and think about what your code above is actually doing.

Okay, so after the marginLeft is increased, you want to decrease it. Then you want to start all over. Right? So:

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

There are lots of other ways to skin this cat, but this does work. http://jsfiddle.net/mattball/rKu6Y/

Upvotes: 9

yoda
yoda

Reputation: 10981

Use jQuery queue() method to chain events : http://api.jquery.com/queue/

Upvotes: 0

Related Questions