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

Question

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> 

Answer 1

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

Answer 2

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/

Answer 3

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