Question

我一直在寻找并使用我发现的零碎碎片（主要是在这个网站上）来帮助我尽我所能，但我害怕我通过走路把自己画成一个角落我不应该早点。基本上我正在努力创造像灯开关。在加载时，页面背景为黑色，图像周围有黑色背景（有一些强光眩光/发光，这就是为什么有图像）。单击开关时，它会将背景颜色更改为白色，并将该图像更改为具有白色背景的其他图像。这工作正常，但我想添加一个淡入淡出，所以它不是一个瞬间变化，有点像一个淡淡的淡入淡出。由于我让早期部分工作的方式，我想知道这是否会比它应该更难。

我已经搜索过并发现没有容器等没有背景颜色的褪色。只是不确定我将如何处理我已经拥有的东西。我完全接受建议，即使这意味着以不同的方式重做以前的一些事情。我留下了一些评论的东西，只是为了展示我之前尝试过的一些东西。我对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");
        }
    });

Answer 1

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

一个选项是jQuery UI color animation。这是一个非常简单的插件，具有易于使用的文档。只需将脚本放在头标中，您就可以开始了。

示例（来自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属性，它将动画为任何背景颜色。

从我所看到的，回头做一些事情，而不是使用插件，（尽管在学习编写很酷的东西时可能是一个很棒的练习）有点棘手。取决于你的目的。

Jquery图像和背景淡出onclick

1 个答案: