0

I want to animate an element only when this element is loaded ( with the background ). I tryed this but doesn't work:

CSS:

#topimg{
   background: rgba(0, 0, 0, 0) url(../img/bg.jpg) 0 0 no-repeat fixed;
   background-size: cover;
}

HTML:

<div id="topimg"> </div>

JAVASCRIPT:

$('#topimg').load(function() {
   $('#topimg').css({opacity: 0}).animate({opacity: 1}, {duration: 1500});
});
xRobot
  • 25,579
  • 69
  • 184
  • 304
  • 1
    doesnt work how? doesnt animate, or animates before the element is fully loaded? – Banana May 12 '15 at 14:34
  • @Banana animate before the element is fully loaded. – xRobot May 12 '15 at 14:37
  • since images are only being loaded once, and stored in the browser cache for later use, there is a good trick [Here](http://stackoverflow.com/a/22788887/3406576) by adeneo. basically you load the backgound image into an `img` element, and when the img is loaded then the image already exists and is loaded for the background of your div as well. – Banana May 12 '15 at 14:40

0 Answers0