jQuery: Animating Div Resize on 'Click'

Question

I have a div I'm using to show the user a status. Its width is relative to the percentage (0-100). Upon click of a button, I'd like to animate the width (in pixels) of that div. Any input on the best way to go about this? I'm already using jQuery, I assume it will use that to animate? (My panel is initially hidden, hence the .live function).

$('#slider50').live("click", function() {

   // Animate here

    });

Solution 1

As stated by PeeHaa you can use the .animate() jQuery function to expand you're div's width as shown in the example below:

http://jsfiddle.net/DKjKP/1/

$("#button").click(function() {
    $("#slider").animate({
        width: '+=30px'
    }, 1000);
});

Solution 2

An easy solution that I think would work would be some something similar to this:

$("#slider50").live("click", function() {
  $(this).slideDown();

  /*  or something like this
    $(this).animate({
      'width' : '500px',
      'height': '500px' 
    });
  */
 });

Hope this helps

Comments

[Bassem]

You can use jQuery effects jQuery Effects docs for easing effects, in addition this library will extend the $.addClass()/$.removeClass() functions to allow transition between styling changes which you can use to change width.

[Zakman411]

Is there a way to set an absolute width? Like 'width: 400px'

[Bassem]

Of course just replace the '+=30px' with '400px' which means that it will animate from what ever value it was set originally to 400px. '+=' will always increment whatever value by what you X px or percentage.