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.

jQuery Animate Top Margin of Div Layer

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:

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 scenarios 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 );

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 );

This is the end of jQuery Animate Top Margin Tutorial.

*****

jQuery Tutorial Animate Bottom Margin of Div Layer

We just learned how to animate the top margin of a div layer. Now, we will 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:

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 also two scenarios 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 );

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 );

This is the end of jQuery Animate Bottom Margin Tutorial.