jQuery的圖像和背景淡化onclick

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顏色動畫。 這是一個非常簡單的插件，帶有易於使用的文檔。 只需將腳本放在您的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屬性，它將設置為任何背景顏色的動畫。

從我的觀察來看，回過頭來從頭開始做點什么，而不是使用插件（盡管這可能是學習編寫有趣的東西的絕妙練習）有點棘手。 取決於您的目的。

jQuery的圖像和背景淡化onclick

問題描述

1 個解決方案

解決方案1
0 2013-12-28 20:48:38

jQuery的圖像和背景淡化onclick

問題描述

1 個解決方案

解決方案1 0 2013-12-28 20:48:38

解決方案1
0 2013-12-28 20:48:38