jquery - 在加载其他 Div 后淡入 Div

Question

我试图在加载一个空的 div 后淡入我的菜单栏(空的 div 中有一个大背景图像)。该图像需要一两秒钟才能加载，因此我需要菜单在图像 (div) 加载后淡入。

这是我的 jquery:

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

(文档 .ready 没有给出正确的效果。)

Answer 1

您不能直接在 div 上执行此操作。

相反，创建一个内存中的图像元素，并将其源设置为背景图像的源；
然后您可以将您的函数附加到 img 的加载事件:

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

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

这是 fiddle :http://jsfiddle.net/BPeG2/