jQuery Web Page Design Tutorials

jQuery Animate Top Margin of Div Layer

In previous jQuery sliding tutorials, we learned how to slide the div layer to create some interesting animation effects. Actually the margin of div layer can also be animated. In this jQuery tutorial, we show how to animate the top margin of a Div Layer.

jQuery Demo

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

Goal of Animate Top Margin

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

jQuery animate top 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-top: 298px;
}

Animate Top Margin

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

Case 1: Displaying the Background Image:

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

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

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

The jQuery codes is:

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

jQuery animate top margin

Case 2: Hiding the Background Image:

Actually the process is the reverse of case 1.

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

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

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

The jQuery codes is:

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

jQuery animate top margin

This is the end of jQuery Animate Top Margin Tutorial.