Question

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.)

Answer 1

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/