Tag Archives: JQuery Animate

Animated Banner With JQuery

Hi All

Today I would like to share some of my experience with JQuery. JQuery is a fantastic lightweight javascript library that makes it possible to do complex things very fast and easily. Animation is one such thing. Animations using JQuery adds up to the looks of your webpage without actually increasing much load on it and also you do not really have to put a lot of efforts for it. It is simple to understand and implement JQuery plugins. It offers a lot of plugins for AJAX, Animations and Effects, UI, Timers and many more. All of them are easily available and free to download here.

In this post I am sharing my source code for creating a simple, useful yet beautiful animated banner with JQuery.

Here is the source:

HTML:

<div id=”container”>
<div id=”imageDiv1″ class=”bottom”><img id=”image1″ src=”images/image1.gif” alt=”” /></div>
<div id=”imageDiv2″ class=”right”><img id=”image2″ src=”images/image5.gif” alt=”” /></div>
</div>

CSS:

#container{
margin-top:150px;
height:135px;
width:215px;
border: 1px solid #000;
text-align:center;
overflow:hidden;
position:relative;
}

.right{
top:-140px;
right:-220px;
position:relative;
}

.bottom{
top:140px;
right:0px;
position:relative;
}

JQuery:

I am adding the query script .js file here with the post. Download the javascript file banner-script.js here.

Please replace the images in this file with yours.

This is really easy and very useful. If you have any queries or you face any problem feel free to contact me.

Hope this is useful for you, thanks for reading 🙂

Updated on 15th January, 2011

Now you can also see the demo here.