This is rather easy to animate HTML Div layer with jQuery. The effects are very interesting.

jQuery Slide Div Up and Dowm from Bottom Side

jQuery Demo

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

jQuery Tutorial Goal

This jQuery tutorial shows how to slide the Picture Div Layer up and down.

This is the HTML codes of the Picture Div Layer.

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

And this is the style of the Picture Div Layer:

#picture {
height: 298px;
width: 282px;
background-image: url(arrow_down.png);
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: #036;
background-repeat: no-repeat;
display: none;
}

Tip:
The display property of Picture Div is set to none so that the “arrow_down.png” image is not show up when the page load up. If the display property is removed, the “arrow_down.png” will be display at the beginning.

jQuery slideToggle Method

The picture div layer is simply sliding up by using the jQuery slideToggle() Method.

The .slideToggle() method actually animates the height of selected element. This causes lower parts of the selected element to slide up or down, making an illusion to dispaly or hidden of the selected element. Note that:

  • If the selected element is displayed, it will be hidden,
  • If the selected element is hidden, it will be displayed then.

In our demo, the selected element (picture div layer) is hidden at the beginning so that the first slideToggle will display the arrow image. After the arrow image is displayed, the next slideToggle will hide the image.

The following is an example using the jQuery slideToggle method. It simply slide the picture div layer up and down in 3000 milliseconds (i.e. 3 seconds). Same as other animation method, a callback function can be used.

$("#picture").slideToggle(3000)

This is the end of jQuery Slide Down and Up from Bottom Side Tutorial.

*****

jQuery Slide Div Up and Dowm from Top Side

We already learned the Div Layer sliding down and up from the bottom side. This jQuery tutorial is quite similar. The difference is that the Div Layer is up and down from the top side.

jQuery Demo

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

jQuery Tutorial Goal

This jQuery tutorial shows how to slide the Picture Div Layer up and down from the top.

This is the HTML codes of the Picture Div Layer.

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

This is the style of the bg Div Layer:

#bg {
height: 298px;
width: 282px;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: #036;
position: relative;
}

And this is the style of the Picture Div Layer:

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

Tip:
The display property of Picture Div is set to none so that the “arrow_down.png” image is not show up when the page load up. If the display property is removed, the “arrow_down.png” will be display at the beginning.

jQuery slideToggle Method

Same as previous sliding Div Layer tutorial, the picture div layer is also sliding down and up up by using the jQuery slideToggle() Method.

The following is the same example using the jQuery slideToggle method in previous tutorial. Interesting enough, if the picture div layer is an absolute div layer, it will sliding down and up from the top side.

$("#picture").slideToggle(3000)

With the Div Layer sliding down and up from the top side, some interesting effect can be achieved. Let’s shows how to create an interesting web page effect with sliding the div layer down and up from the top side.

jQuery Demo

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

jQuery Tutorial Goal

The codes of this jQuery example is same as the previous tutorial. It also add the terrible background picture and replace the arrow picture with the Dracula.

jQuery slideToggle Method

It also uses the slideToggle method to slide the dracular picture div layer down and up.

$("#picture").slideToggle(3000)

This is the end of jQuery Slide Down and Up from Top Side Tutorial.