Question

I am a bit new to jQuery, and trying to learn it. I am animating an element after its parent is clicked, but I also want the element to go back to its original state after a set time period. I did try setTimeout but I may be using it wrong, so it didn’t work. Can someone explain how to do this?

var span = $('span');

$('button').click(function(){


    span.animate({

      left: '200' }, 500, 'linear',  function() {

      });
     });

Answer 1

You could do that like this. You save the original value for left and use the delay() method to chain multiple animations with a time delay between them:

var span = $('span');
// insert span into your document somehow
// set absolute positioning on it
$('button').click(function(){
    var origLeft = span.css("left");
    span.animate({left: '200' }, 500, 'linear').delay(2000).animate({left: origLeft}, 500, 'linear');
});

Working demonstration here: http://jsfiddle.net/jfriend00/zB5NL/