jQuery Web Page Design Tutorials

jQuery Tutorial Animate Bottom Margin of Div Layer

In previous jQuery animation tutorials, we learned how to animate the top margin of a div layer. In this jQuery tutorial, we learn how to animate the bottom margin. Actually the concept of animating the bottom margin is exactly the same as animating the top margin. The only difference is that the animating happens at the bottom margin.

jQuery Demo

A demo of this jQuery tutorial is available. Click here to View Demo. (Pop up window)

Goal of Animate Bottom Margin

The following diagram is the starting layout of the Div Layer:

jQuery animate bottom margin

This is the HTML code of the picture Div Layer:

<div id="picture"></div>

This is the styles of the picture Div Layer:

#picture {
height: 0px;
width: 282px;
background-image: url(arrow_down.png);
background-repeat: no-repeat;
text-align: center;
bottom: 121px;
left: 190px;
margin-bottom: 298px;
}

Animate Top Margin

There are two scenerios when animating the Bottom Margin of Div Layer.

Case 1: Displaying the Background Image:

Height of picture div layer: 0 pixels
Bottom margin of picture div layer: 298 pixels

The animation is then simply animate the height and bottom margin at the same time, thus create the effect of displaying the background image.

Animate height: from 0 to 298 pixels, and
Animate Bottom Margin: from 298 to 0 pixels

The jQuery codes is:

$("#picture").animate( {height: 298, marginBottom: 0}, 4000 );

jQuery animate bottom margin

Case 2: Hiding the Background Image:

Actually the process is the reverse of case 1.

Height of picture div layer: 298 pixels
Bottom margin of picture div layer: 0 pixels

The animation is also simply animate the height and bottom margin at the same time, thus create the effect of hiding the background image.

Animate height: from 298 to 0 pixels, and
Animate Bottom Margin: from 0 to 298 pixels

The jQuery codes is:

$("#picture").animate( {height: 0, marginBottom: 298}, 4000 );

jQuery animate bottom margin

This is the end of jQuery Animate Bottom Margin Tutorial.