Sunday, June 24, 2012

Flash Effect Image Loading with Jquery.

Flash Effect Image Loading with Jquery.



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