Animation with jQuery is easy and fun. Unlike Flash animation or other similar programs, animating with jQuery is usually involves the HTML elements layout on the webpage. It may be animating a Div layer, a button, texts, etc…

Today, let’s illustrate how to use jQuery to animate a Div layer in horizontal direction on a web page. The final animation effect is shown as below:

Useful jQuery Animation Tutorial:

jQuery Animate Element in Horizontal Direction Tutorial

Firstly, layout all the HTML elements on a web page. The button will not has any effect in this example. It will be used later.

I use a outer wrapper Div layer (frame Div layer) to hold another two Div layers. The pageContent Div layer is the contents that I wish visitors to see. The picture Div layer (Curtain) is simply use to cover the contents.

When the curtain move to the right then the contents below will be seen. That’s the theme of this simple animation.

Let’s study how the pageContent Div layer and picture Div layer layout on the web page.

Now, everything should be clear after studying the HTML layout of the three Div layers.

Note:

  • The CSS position of animation picture Div layer is set to absolute.

It’s time to see how to animate the picture Div layer to the right.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide Div Layer To Right</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $("document").ready(function() {

        // Move the curtain to the right by 300px
        //  in 5 seconds when web page open
        $("#picture").animate({ "left": "+=" + 300 + "px" }, 5000);

    });
</script>
</head>

<body>

<h1>jQuery Animate Div Layer To Right</h1>

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

<div style="width:282px; text-align: center; margin-bottom:10px;">
    <input type="button" value="Click Here Animate Curtain to Right" />
</div>

<div style="width:282px; text-align: center"></div>
</body>
</html>

Look! The syntax is very simple. It simply increase the position of the picture Div layer relative to the frame Dive layer, thus create an animation effect.

Please noted that the CSS position property of a Div layer must be set to absolute or relative in order to have animation effect.