animating a simple jquery function

Question

I have a simple jquery function that resizes a table when it is clicked.

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

 <script type="text/javascript">
  $(document).ready(function()
  {
   $('.expand_table').live("click", function()
   {
       $('.expand_table').attr('width', 800);
   }); 
  });
 </script>

How would I build on this to make the table smoothly expand or grow to the new size?

Answer 1

Use the animate function with more options

animate

$(".expand_table").animate({ width: "800px" }, 1500 );

<script type="text/javascript">
 $(document).ready(function()
 {
  $('.expand_table').live("click", function()
  {
          //$('.expand_table').attr('width', 800);
                $(".expand_table").animate({ width: "800px" }, 1500 );
                // 1500 can be replaced with "slow", "normal", or "fast" or a 
                // number that specifies the speed of the animation
  }); 
 });
</script>

Answer 2

You can't animate an attribute, though. So you'd have to set the size in CSS.. Just switch

$('.expand_table').attr('width', 800);

for:

$('.expand_table').animate({ "width":"800px" }, 500); //uses 500ms to complete

Answer 3

Refer to here:http://jqueryui.com/docs/Effects/Methods

Lots of example where you can apply on.

Best