Reputation: 11
I was wondering how I could use Jquery to make my images appear (sorta fade in) one by one. Basically I have a grid of images, and I want those to appear one by one on page load.
Here is my code below:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="images">
<a href="#"><img src="" alt=""/></a>
<a href="#"><img src="" alt=""/>
<a href="#"><img src="" alt=""/></a>
<a href="#"><img src="" alt=""/></a>
<a href="#"><img src="" alt=""/></a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#images').find('a').fadeIn(500);
});
</script>
How can I achieve this using Jquery?
Thanks!! =]
Upvotes: 1
Views: 175
Reputation: 62015
There are a few ways to do this discussed here.
The following approach uses the "complete" callback to add a new event - the next fade won't start until the current one finishes, however long that takes. An advantage (and disadvantage) of an approach like this is it defers creating/queuing subsequent animations.
var $elms = $('#images').find('a');
$elms.fadeOut(0);
var elms = $.makeArray($elms); // a real array for .shift
function fadeNext () {
// get next element
var e = elms.shift();
if (e) {
// queue animation, rinse and repeat when it's complete
$(e).fadeIn(500, fadeNext);
}
}
fadeNext();
(And the corresponding jsfiddle.)
Upvotes: 1
Reputation: 9313
Try the following code:
$("img").each(function(idx){
$(this).delay(100*idx).fadeIn(500);
});
The fadeIn of each image will start 100ms (100*idx) later than the previous.
Here is one of my pages where I tested this technique: hexagons apperaring in sequence
Upvotes: 4