Question

当我点击about链接时，gif图像将加载到页面的一角。但是我需要淡入整个背景页面加载，我添加了$('#content').fadeIn(1000);来显示淡入淡出效果的背景但是如何在gif加载背景时淡出背景页面？

HTML

<div id="cssmenu">
        <li><a href="index.html">HTML</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="portfolio.html">portfolio</a></li>
</div>
<div id="wrapper">
<div id="content">      
        <h2>Welcome!</h2>
        <p> ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page some awesome effects...</p>
</div></div>

CSS

#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 {
}

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;

    });

});

拨弄

http://jsfiddle.net/bpvp4vse/1/

Answer 1

    #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;
}

将#wrapper更改为#content

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

http://jsfiddle.net/bpvp4vse/8/

如何淡化页面加载背景 - jQuery

1 个答案: