CODEWITHSUNDEEP
jquerycssonload
Adam
Adam

Reputation: 1459

simple jquery, animate on load not working

I have some images I would like to animate to 100% opacity once the page has loaded.

I have this code but for some reason it does not work.

Css code is...

#photos img {
  width: 100% !important;
  height: auto !important;
  margin: 5px 10px;
  opacity: 0.2;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.loaded {
  opacity: 1;
}​

Jquery code is...

$(function(){
    $('#photos img').on("load", function(){
        $(this).addClass("loaded");
    });
});​

I have the jsfiddle here... http://jsfiddle.net/rzdzf/

I'm sure I am missing something really small...? Any help would be appreciated.

Upvotes: 0

Views: 2138

Answers (4)

Jasper
Jasper

Reputation: 76003

Just bind to the window.load event, all images will be loaded at that point. This is helpful because of issues with binding to image load events. Because of browser caching, who knows if the image is already loaded (in which case your load event handler won't fire)

//run this in the global scope, the `window` object is always available
$(window).on("load", function () {
    $('#photos img').addClass("loaded");
});​

Here is a demo: http://jsfiddle.net/rzdzf/10/

Also your .loaded class is not being applied because it is less specific than the #photos img rule, so just make it more specific:

#photos img.loaded {
    opacity : 1;
}

Upvotes: 0

Gogol
Gogol

Reputation: 3072

Use this as your script :

$(function(){
    $('#photos img').animate({opacity:1});
    });​

Upvotes: 0

khollenbeck
khollenbeck

Reputation: 16157

Try doing something like this...

$('#photos img').animate({opacity: 1}, 1500 );

Or for on load:

$('#photos img').on("load", function(){
     $(this).animate({opacity: 1}, 1500 );
});

Upvotes: 4

JKirchartz
JKirchartz

Reputation: 18022

If it's just in this fiddle, it's because the setting on the left pane says to run the code onLoad; but then you have an onLoad in there, but it's already loaded so it doesn't run. Change it to nowrap. When I did this it worked as expected.

Upvotes: 1

Related Questions