Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Fade In Div After Other Div is loaded

Fade In Div After Other Div is loaded

Problem

I'm trying to Fade in my menu bar after an empty div is loaded (there is a large background image in the empty div). That image takes a second or two to load so I need the menu to fade in after the image (div) is loaded.

Here's my jquery:

$(.top-bg).ready(function() {
  $(".top-bar").fadeIn(1000);
});

(Document .ready doesn't give the proper effect.)

Problem courtesy of: Connor

Solution

You cannot do that directly on that div.

Instead, create an in-memory image element, and set its source to the source of the background image;
then you can attach your function to the img's load event:

$(document).ready(function($) {
    var img = new Image();
    img.src = $('.top-bg').css('background-image').replace(/url\(|\)/g, '');

    img.onload = function(){
      $(".top-bar").fadeIn(1000);
    };
});

Here's the fiddle: http://jsfiddle.net/BPeG2/

Solution courtesy of: Joseph Silber

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Fade In Div After Other Div is loaded

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×