Jquery animated information box

This tutorial is a very simple approach on how to create an information box using Jquery and some CSS styling.
This is a very unique one and really an eye caching for the visitors of your site since the information box blinks accordingly before coming to a halt.This kind of approach really makes the visitors read your website important notice without implementing complex javascript pop up window screens.Here is how the code looks

<style>
#info{

border: 1px solid;

margin: 10px 0px;

padding:15px 10px 15px 50px;

background-repeat: no-repeat;

background-position: 10px center;

position:relative;

color: #00529B;

background-color: #FBE5F8;

background-image: url('http://mistonline.in/wp/demo/mistonline.in_alert.jpg.png');

}

</style><script src="http://mistonline.in/wp/demo/jquery-1.2.3.min.js" type="text/javascript">

</script>

<!--Dont Delete This Notice, This code is from http://mistonline.in, the one stop reference for all web developers.
Please keep this above notice for our promotion purpose.Thank you very much-->

<script type="text/javascript">

$(document).ready(function(){

$(".close").click(function(){

$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});

});

$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)

.fadeOut(400).fadeIn(400);

});



</script>

<div id="info">

<a class="close" href="#close" style="float: right;"><img border="0" src="http://mistonline.in/wp/demo/close.jpg" /></a>

This is a test message from Mistonline.in, you can customize this accordingly. Click on close button on right to exit this box</div>

In the above script you can increase the FADE IN and FADE OUT capability of the script by adding fadeIn() or fadeOut()

DEMO HERE

Incoming search terms:

• jquery info box (51)
• jquery information box (36)
• jquery animated information box (27)
• jquery info bubble (22)
• jquery letter animation (11)
• remove inurl:/supported/memberlist php?mode= (4)
• Scripts and Code add url (3)
• Animation add url (3)
• mistonline in/wp/demo/jquery 1 2 3 min js (2)
• Animation InURL: add url (2)
• fade in info box jquery (1)
• jquery information boxes (1)
• jquery information bubbles (1)
• jquery popup info (1)
• jquery ui info box (1)
• jQuery_Animated_Information_Box (1)
• more information box popup (1)
• jquery information box for more information (1)
• auto pop up bubbles demo jquery (1)
• body-background-images-change-with-fading-using-jquery (1)
• information box for images jquery (1)
• information box in jquery (1)
• information box using jquery (1)
• information bubbles jquery (1)
• Inurl:add your link (1)
• inurl:viewprofile (1)
• jquery ANIMATED BORDER demo (1)
• draw information box in jquery (1)
• button click ajax info box (1)
• ajax box animation (1)