Question

I want to animate and resize div tag from right to left.

By default i have learnt from examples and found it resizes from left to right but as per project requirement we wish to have it in right to left order.

The code I have written is :

<script type="text/javascript"> 
$(document).ready(function()
{
   $("button").click(function()
   {
      $("div#div1").animate({height:166},5000);
      $("div#div1").animate({width:800},5000);
   });
});
</script> 

<div id="div1" style="background:url(stripes.JPG);height:0px;width:0px;position:relative;" hidden="hidden">

This works well in left to right animation; please suggest similar approach where the div will resize from right to left.

Thanks in advance.

Answer 1

It’s all a matter of your CSS. Have your animated element wrapped in a position:relative element, and set its CSS to position: absolute; bottom: 0; right: 0;. Then youre animation will be displayed in the desired direction. See: http://jsfiddle.net/9SJ4Q/