jquery: fade in image after image

jquery list fade
monkeylee picture monkeylee · Aug 18, 2009 · Viewed 10k times · Source

I have a page with 10 images in and I want to fade them in one after another once the image has been downloaded. how can I detect the image is loaded and ready to be displayed? and should I loop through the loaded images fadeIn and once fadedIn wait for the next to load?

Answer

Kris Erickson picture Kris Erickson · Aug 18, 2009

Just use the load() event on an image. E.g.

$('#some_image').hide()
    .load(function () {
      $(this).fadeIn();
    })
    .attr('src', 'images/headshot.jpg')

Related questions

Jquery before submitting the form

I have a list, (a simple list) from which i am able to select and set elements (using js), and then a form that allows me to choose how many elements i want, and a submit form.if one doesn't …

Read More
jquery - keep window from changing scroll position while prepending items to a list?

I have a page that displays messages and I want it to work just like Facebook, but without the lazy loader. Messages are displayed in chronological order, most recent last. My message list is initially populated x number of most …

Read More
jQuery checkbox values to comma separated list

I have several checkboxes with a name array and I want the output of the checked boxes to be a variable with a comma separated list. <input type="checkbox" name="example[]" value="288" /> <input type="checkbox" name="example[]" …

Read More