Jquery animated information box
Jquery animated information box
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()
Jquery animated information box,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)