how to make the 'animate' run the opposite direction using jquery .

Question

this is my code:

$('#map_canvas').animate({width:'69.8%'},300);

this will run from left to right ,

how to make it from right to left ?

thanks

Answer 1

To slide it back from right to left, make its width 0 again:

$('#map_canvas').animate({width:'0'},300);

Answer 2

You could do something like this:

$('#map_canvas').each(function() {
  var newLeft = $(this).width() * .302;
  $(this).animate({left: newLeft, width:'69.8%'},300);
});

You can give it a try here, I slowed it down 10x to better see the effect. All we're doing is calculating the width of the element * 30.2% to see how far left it should move and animating that property at the same time. All the element needs is to be at least position: relative for this to work.

The above should work in all cases, but this simpler version will work in most cases as well:

$('#map_canvas').animate({left: '30.2%', width:'69.8%'}, 300);