Geek Answers Handbook

Css3 image fadein

I am trying to make the images fade out using css3 after loading them. The problem is how my methods are currently chained, it fades twice and breaks for two seconds. instead of just being empty and fading.

My solution was to try to split the animation code into a separate class, which I apply AFTER I initially set the opacity to zero (I do this in JS so that people not including js can still see the images).

It still doesn't work though

I suppose, because in this code it sets the opacity to zero and immediately adds an animation transition class that somehow catches the opacity.css () method while it is still changing (I don't know how this is possible ... shouldnt it be fully opaque before moving on to adding a class?)

// nice thumbnail loading $('.thumb').css('opacity','0').addClass('thumb-animated').on('load', function(){ $(this).css('opacity','1'); }); .resources .thumb-animated { -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -ms-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s; }
+4
source share
4 answers

Well...

Why do you set opacity to 1 in jQuery? If you want to use CSS3 and not just fadeIn (200), why don't you add "opacity: 1" to the css class thumb-animated?

EDIT:

Please note that the download will not start if the image is already in the cache.
In addition, you must add !important to rewrite the rule modified with javascript.

There you go: http://jsfiddle.net/enTCe/5/ This seems to work fine outside of JSfiddle, on JSfiddle it looks like it is waiting for all images to load.

+1
source

How about using only css animations? No JS code required.

  @-webkit-keyframes opacityChange { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes opacityChange { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes opacityChange { 0% { opacity: 0; } 100% { opacity: 1; } } .thumb { width: 200px; height: 200px; opacity: 1; -webkit-animation: opacityChange 5s; -moz-animation: opacityChange 5s; -ms-animation: opacityChange 5s; }
+1
source

You can wait for the class to be added to the image upload.

 $('.thumb').css('opacity','0').on('load', function(){ $(this).addClass('thumb-animated').css('opacity','1'); });
0
source

Try something like this:

 $('#thumb').hide(); myImg = $('<img>').attr('src', 'thumb.png').load(function(){ $('#thumb').html(myImg).fadeIn(200); });
-1
source

More articles:


All Articles