使用fadeIn（）淡入背景图像

Question

我想更改背景图像（该图像我ChangeBg构建了一个ChangeBg函数）以使其褪色。

为什么这不起作用？ 我究竟做错了什么？

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.js"type="text/javascript"></script>
<script language="JavaScript">
    function changeBg (color) {
        document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-  repeat";
        $("changeBg").fadeIn("slow"); }
</script>

Answer 1

我假设您缺少# ：

 $("#changeBg").fadeIn("slow");

如果changeBg是html元素的ID。

document.getElementById // <-- knows it's an ID
$() // <- can select classes, tags, :first's, :contain's, etc, etc

因此，jQuery使用井号＃来指定ID。

Answer 2

一目了然的事情：

图片的url路径是相对于页面的吗？ 换句话说， url(Images应该是url(/Images吗？

我假设您的代码中实际上没有no- repeat空格？ 我认为浏览器不会自动为您清理。

最后（但也许是最重要的），您必须修复选择器：如果changeBg是元素id属性，则$("changeBg")应该应该是$("#changeBg") 。

Answer 3

这里的changebg是什么？ 你不是说$('#wrapper').fadeIn(); ？

Answer 4

尝试使用jquery或javascript。 不要混淆

function changeBg (color) {
        $("#wrapper").css("background","url(Images/"+color+".jpg) no-repeat");
        $("#wrapper").fadeIn("slow"); 
}

Answer 5

这是一个带有背景图像的淡入淡出示例： http : //jsfiddle.net/jasper/XeKLw/

HTML：

<div></div>

CSS：

div {
    width  : 300px;
    height : 300px;
    background : url(...) center center;
    display : none;
}

JS：

$(document).on('click', function () {
    $('div').fadeToggle();
});

注意： .on()是jQuery 1.7中的新增功能，在这种情况下将替换.bind() 。