jQuery Web Page Design Tutorials

jQuery Animation and Effect Tutorial (Part 5)

This jQuery tutorial shows how to resize or animate the width and height of selected element.

jQuery Resize Width and Height of Element

This is very easy to resize or animate the width and height of selected element. This can be achieved by increasing or decreasing the dimension. The following is the basic syntax of animating the height and width of an selected element.

jQuery resize element

The above jQuery example resize the selected element by increasing the width and height. Another way to resize selected element is to animate the selected element to a specified height and width. The basic syntax of jQuery code is shown below:

jQuery resize element

Resize Element

The selected element can be resized bigger or smaller

  • By increasing the value of height (+=), the height will animate taller.
  • By decreasing the value of height (-=), the height will animate shorter.
  • By increasing the value of width (+=), the width will animate wider.
  • By decreasing the value of width (-=), the width will animate shorter.

Example 1:

The following jQuery codes resize or animate the frame element by increasing the height by 30 pixels and increasing the width by 40 pixels when the Frame Resize button is clicked.

$("#frameSizeChange").click(function() {
$("#frame").animate( {"height": "+=30px", "width": "+=40px"}, 1000 );
});

Example 2:

The following jQuery codes animate the frame element by setting the height to 270 pixels and the width to 650 pixels when the Frame Resume button is clicked.

$("#frameSizeResume").click(function() {
$("#frame").animate( {"height": "270px", "width": "650px"}, 1000 );
});

Tips:

  • The Duration is an optional parameter. In other words, the following jQuery codes also works:
    $("#frame").animate( {"height": "+=30px", "width": "+=40px"});

  • The Duration parameter can also use "slow", "fast", "normal" or given in milliseconds, i.e.
    $("#frame").animate( {"height": "+=30px", "width": "+=40px"}, "slow" );

  • The jQuery animate() Method can also take a callback parameter. The callback parameter is the function to be called or executed after the hide function is completed.

    $(Selected Element).animate({"top": "+=30px"}, Duration, callback);

This is the end of jQuery Animation and Effect Tutorial.