Javascript 如何在页面加载时淡入背景-jQuery

当我点击“关于”链接时，gif图像将加载到页面的角落。 但我需要在页面加载时淡入整个背景，我已经添加了

$（“#content”）.fadeIn（1000）

以淡入淡出效果显示背景，但在背景上加载gif时，如何淡入背景页面

HTML

JQuery

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#cssmenu li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                           
    });

    $('#cssmenu li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
 $('#content').fadeIn(1000);
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

$（文档）.ready（函数（）{
var hash=window.location.hash.substr（1）；
var href=$（'#cssmenu li a'）。每个（函数（）{
var href=$（this.attr（'href'）；
if（hash==href.substr（0，href.length-5））{
var toLoad=hash+'.html#content'；
$（“#内容”）.load（toLoad）
}                                           
});
$（'#cssmenu li a'）。单击（函数（）{
var toLoad=$（this.attr（'href'）+'#content'；
$（'content'）.hide（'fast'，loadContent）；
$（“#加载”）.remove（）；
$（“#包装器”）.append（'LOADING…'）；
$（'内容'）.fadeIn（1000）；
$（'加载'）.fadeIn（'正常'）；
window.location.hash=$（this.attr（'href'）.substr（0，$（this.attr（'href'）.length-5）；
函数loadContent（）{
$（'#content'）.load（toLoad'，showNewContent（））
}
函数showNewContent（）{
$（'#content'）.show（'normal'，hideLoader（））；
}
函数hideLoader（）{
$（'加载'）.fadeOut（'正常'）；
}
返回false；
});
});

拨弄

将包装更改为内容

$（'content'）.append（'LOADING…'）；

---

为什么不使用

img

？将img设置为负

z-index

，将加载图像设置为更低的

z-index

。在这种情况下，您可以轻松地设置背景图像不透明度之类的动画？

#wrapper {
border:1px solid green

}
#cssmenu {
  background: #333;
  list-style: none;
width:120px;
}
#cssmenu li {

  margin: 0;
  padding: 0;
  list-style: none;
  width:120px;
}
#cssmenu a {
  background: #333;
  border-bottom: 1px solid #393939;
  color: #ccc;
  display: block;
  padding: 8px 2px;
  text-decoration: none;
  font-weight: normal;
}
#cssmenu a:hover {
  background: #2580a2;
  color: #fff;

}

#load {
    display: none;
    position: absolute;
    right: 10px;
    top: 10px;
    background: url(http://i.imgur.com/fhiyJSJ.gif);
    width: 43px;
    height: 11px;
    text-indent: -9999em;
}
#content {
}

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#cssmenu li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                           
    });

    $('#cssmenu li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
 $('#content').fadeIn(1000);
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

    #wrapper {
         border:1px solid green;
            position:relative;// add this
   }
#load {
    display: none;
    position: absolute;
    right: 50%; //this
    top: 50%;//this
    background: url(http://i.imgur.com/fhiyJSJ.gif);
    width: 43px;//hack to center horizontally
    height: 11px;//hack to center vertically
    margin-left:-21px;
    margin-top:-5px;
    text-indent: -9999em;
}

$('#content').append('<span id="load">LOADING...</span>');