如何在页面加载的背景下淡入淡出-jQuery

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

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/

来源

2015-04-23 Prime

你为什么不使用'img'？将该img设置为负Z-index，并将加载图像设置为更低的Z-index。在这种情况下，您可以轻松地制作背景图像的不透明度等动画。 – Vinc199789

这样的事情？ http://jsfiddle.net/bpvp4vse/2/ – madalinivascu

@madalinivascu是的， – Prime

#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').append('<span id="load">LOADING...</span>');

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

来源

2015-04-23 08:39:06 madalinivascu

如何在页面加载的背景下淡入淡出-jQuery

回答

相关问题