Javascript/jQuery背景图片淡入

你好向导的stackoverflow！我今天刚刚开始使用JQuery，并且我卡住了。我需要背景图片来淡入淡出。您可以忽略basepath函数这正是我所使用的，所以我永远不需要输入图像的完整路径。Javascript/jQuery背景图片淡入

无论如何，它只是不工作不会加载或更改背景。奇怪的是，我没有在firefox firebug/web developer中出现错误。

var bodyElement = document.getElementsByTagName("body"); 
var backgroundSource = $(bodyElement[0]).css("backgroundImage"); 
var parentDirectory = basepath(backgroundSource); 
var IMG = parentDirectory + "/jurasic_bg.jpg"; 




window.onload = function(){fadeBG();}; 





function basepath(elementObject){ 
var elementObject = elementObject.replace(/^url|[\(\)"]/g, ''); 
var elementPathArray = elementObject.split("/"); 
var elementPathArrayLength = elementPathArray.length - 1; 

for (var counter = 0; counter < elementPathArrayLength; counter++) 
    { 
     if (counter == 0) 
     { 
      pathBuilder = elementPathArray[counter]; 
     } 

     else 

     var pathBuilder = pathBuilder + "/" + elementPathArray[counter]; 

    } 

     return pathBuilder; 
} 


function fadeBG(){ 
    $('body').fadeIn('slow', function() 
     { 
     $(this).css('background-image', 'url(', IMG,')'); 
     }); 
     }

来源

2013-06-19 Cory Smith

你不能动画据我所知，身体的背景图像。

你可以做的是做两个div来占据整个窗口。我不认为早期版本的IE支持CSS（cover）这样做，但这是你可以做的。

<div class='bg none'></div> 
<div class='bg one'></div> 

div.bg{ 
    min-width: 100%; 
    min-height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-size: cover; 
} 

div.one{ 
    background-image: url('path'); 
    display: none; 
}

你提到了jQuery，所以这是如何工作的：你需要使用文档就绪事件来触发你的动画。你可能需要delay这么长时间才能得到你想要的效果，但这应该让你朝着正确的方向前进。哦，不要忘了在你自己的脚本之前在你的HTML中包含jQuery库。

$(document).ready(function(){ 
    $('div.one').fadeIn(); 
    $('div.none').fadeOut(); 
});

来源

2013-06-19 03:16:06 Psych0Mantis

这实际上很棒！然而，它也会在子元素中消失。所以不是给它看起来像一个背景淡入淡出看起来像整个页面淡入。这是因为我不得不包围fadeIn div围绕其他人，使其完整的大小，而不是在顶部或底部挤压。对此有何建议？顺便说一句，非常感谢这么多人的答案是非常有益的。 –

好吧，没关系div问题解决。 div的风格必须设置为top：0px; left：0px; –

以及固定或绝对位置。和z-index来定位div。 –

我不相信你可以淡入一个元素的背景与其内容分开。

你可以做一个单独的元件可以保持背景和褪色，在，在This question

建议或者你可以做背景，在变淡一个.gif。

来源

2013-06-19 02:36:43 Joe

Javascript/jQuery背景图片淡入

回答

相关问题