如何淡出原始圖片，然后淡入另一張圖片？

Question

因此，這是My Javascript代碼，基本上它的作用是根據用戶想要的顏色或用戶想要的圖像（熊貓或Dj）將一幅圖片更改為另一幅圖片。

我要添加什么以使舊圖片淡出而新圖片淡入？

我的html可以調用切換圖像，效果很好，我只是不知道如何添加炫酷效果。

<script type="text/javascript">
    function O(obj)
    {
        if (typeof obj == 'object') 
            return obj;
        else 
            return document.getElementById(obj) 
    }

    var head = "Dj"
    var headcolor = "pink"


        function headpink(){headcolor = "pink"; changehead();}
        function headblue(){headcolor = "blue"; changehead();}
        function headdefault(){headcolor = "default"; changehead();}
        function headred(){headcolor = "red"; changehead();}


        function DjHead(){head = "Dj"; changehead();}
        function PandaHead(){head = "Panda"; changehead();}


    function changehead()
        {
        if (head == "Dj")
            {
                if(headcolor == "pink"){headImagePath = 'head/DjPink.png';}
                if(headcolor == "blue"){headImagePath = 'head/DjBlue.png';}
                if(headcolor == "red"){headImagePath = 'head/DjRed.png';}
                if(headcolor == "default"){headImagePath = 'head/DjDefault.png';}
            }
        if (head == "Panda")
            {
                if(headcolor == "pink"){headImagePath = 'head/PandaPink.png';}
                if(headcolor == "blue"){headImagePath = 'head/PandaBlue.png';}
                if(headcolor == "red"){headImagePath = 'head/PandaRed.png';}
                if(headcolor == "default"){headImagePath = 'head/PandaDefault.png';}
            }

                O("head").src = headImagePath;
        }
        </script>

Answer 1

您可以使用jQuery fadeIn和fadeOut ； 這些功能可讓您顯示/隱藏具有效果的元素

如果考慮使用switch語句，請不要使用類似的方法。

參考： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/switch

代碼（未經測試）：

function O(obj) {
    if (typeof obj == 'object') return obj;
    else return document.getElementById(obj)
}

var head = "Dj"
var headcolor = "pink"
var headImagePath;


    function headpink() {
        headcolor = "pink";
        changehead();
    }

    function headblue() {
        headcolor = "blue";
        changehead();
    }

    function headdefault() {
        headcolor = "default";
        changehead();
    }

    function headred() {
        headcolor = "red";
        changehead();
    }


    function DjHead() {
        head = "Dj";
        changehead();
    }

    function PandaHead() {
        head = "Panda";
        changehead();
    }


    function changehead() {
        switch (head) {
            case "Dj":
                switch (headcolor) {
                    case "pink":
                        headImagePath = 'head/DjPink.png';
                        break
                    case "blue":
                        headImagePath = 'head/DjBlue.png';
                        break
                    case "red":
                        headImagePath = 'head/DjRed.png';
                        break
                    case "default":
                        headImagePath = 'head/DjDefault.png';
                        break
                }
                break;
            case "Panda":
                switch (headcolor) {
                    case "pink":
                        headImagePath = 'head/PandaPink.png';
                        break
                    case "blue":
                        headImagePath = 'head/PandaBlue.png';
                        break
                    case "red":
                        headImagePath = 'head/PandaRed.png';
                        break
                    case "default":
                        headImagePath = 'head/PandaDefault.png';
                        break
                }
                break
        }

        $(O("head")).fadeOut(700, function () {
            $(this).attr('src', headImagePath).fadeIn(700);
        });

    }

Answer 2

您在這里重復了很多，而不使用jQuery。

為什么不將選項存儲在這樣的對象中：

var options = {
  head: ['Panda', 'Default']
};

然后，您可以執行以下操作：

var $head = $('#head');

var getHeadImage = function(){
  return '/head/' + options.head.join('') + '.png';
};

$head.fadeOut('slow', function(){
  $head.attr('src', getHeadImage).fadeIn('slow');
});

Answer 3

為什么不只在數組中設置文件名，然后使用jQuery淡入淡出呢？