Wednesday, February 16, 2011

Flash Effect Image Loading with Jquery


How to load images with flash effect using jquery. It is very useful script to loading images with nice effect on your web projects and also simple just seven lines of code. Use it and enrich your web page. Thanks!


 Live Demo


Javascript and HTML Code
I had implemented this on labs.9lessons home page.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var i = 0;
$('#imagesdiv img').clone().appendTo($('#imagesdiv'));
$('#imagesdiv img').each(function()
{
var me = this;
$(this).hide()
var j = i;
setTimeout(function()
{
$(me).fadeIn(1000);
}, i)
i += 100
});
});
</script>
//HTML Code
<div id="imagesdiv">
<img src='1.jpg' />
<img src='2.jpg' />
<img src='3.jpg' />
<img src='4.jpg' />

<div/>

No comments:

Post a Comment