1

我一直在四处寻找并使用我发现的点点滴滴（主要是在这个网站上）来帮助我尽可能地走得更远，但恐怕我走一条我不应该走的路线把自己画到了一个角落里没有早点。基本上我正在尝试创建一个电灯开关。加载时，页面背景为黑色，框架周围带有黑色背景的图像（有一些轻微的眩光/发光，这就是为什么有图像的原因）。当您单击开关时，它会将背景颜色更改为白色，并将该图像更改为具有白色背景的其他图像。这工作正常，但我想添加一个淡入淡出，所以它不是即时变化，有点像淡入淡出开/关。由于我让前面部分工作的方式，我想知道这是否会比它应该的更困难。

我已经搜索并阅读了没有容器等的背景颜色不会褪色。只是不确定我将如何处理我已经拥有的东西。我完全愿意接受建议，即使这意味着以不同的方式重做之前的一些事情。我留下了一些评论的东西只是为了展示我以前尝试过的一些东西。我对 jQuery 很陌生，所以我希望其中一些可能会完全消失。

小提琴补充道。图片只是模拟图片，但服务于它们的目的 http://jsfiddle.net/timtim123/7wh4B/

HTML：

<body id="bodyback">

    <img id="out" src="rhino.png" width="527" height="376" border="0" />
    <img id="frame" src="frame.png" width="589" height="377" border="0" />
    <img id="paper" src="paper.png" width="142" height="214" border="0" usemap="#links" />


<img src="background.png" id="backimg"/>
<img src="background2.png" id="backimg" style='display:none;'/>


<div id="lightswitch">
<img src="switchdark.png" width="46" height="275" border="0" alt="Make it light" />
</div>

CSS：

#bodyback   {
        background-color:black;}

#backimg 
        {
        position:absolute;
        top: 0px;
        left: 0px;
        z-index: 2;
        }
#backimg2 
        {
        position:absolute;
        top: 0px;
        left: 0px;
        z-index: 2;
        }
#lightswitch
        {
        top: 0px;
        left: 900px;
        position:absolute;  
        z-index: 7;
        }

JS：

 $("#lightswitch").click(function() {

        var src = $('#backimg').attr('src');

        //change background image and color to white
        if(src == 'background.png') {
    //      $("#backimg").fadeTo('slow', 0.3, function()
    //      $(this).attr("src","background2.png"),
            $("#backimg").attr("src","background2.png"),
            $("#bodyback").css("background-color","white");

        //change background image and color back
        } else if(src == "background2.png") {
            $("#backimg").attr("src","background.png"); 
            $("#bodyback").css("background-color","black");
        }
    });
4

1 回答 1

0

这是一个非常简单的 jQuery 插件选项，如果你想走那条路

一种选择是jQuery UI 颜色动画。这是一个非常简单的插件，带有易于使用的文档。只需将脚本放在你的 head 标签中，你就可以开始了。

示例（来自 jQuery 文档）

 $(function() {
    var state = true;
    $( "#button" ).click(function() {
    if ( state ) {
        $( "#effect" ).animate({
            backgroundColor: "#aa0000",
            color: "#fff",
            width: 500
        }, 1000 );
    } else {
        $( "#effect" ).animate({
            backgroundColor: "#fff",
            color: "#000",
            width: 240
         }, 1000 );
    }
        state = !state;
    });
});

您会注意到，您设置了一个 backgroundColor 属性，它会以任何背景颜色进行动画处理。



从我所看到的情况来看，与使用插件相比，返回并从头开始做一些事情（尽管这可能是学习编写很酷的东西的绝佳练习）有点棘手。取决于你的目的。

于 2013-12-28T20:48:38.000 回答