主要画面渐渐消失，但没有消失

Question

我的代码所做的是将主图像id="head"与另一个图像切换，具体取决于用户按下哪个按钮，是否要更改颜色等。

代码的问题是javascript的最后一部分。

我可以设法淡出主画面，但之后它不会淡入。所以当我点击一个没有用新图像返回的按钮时，我会留下一张消失的图像。

HTML

<img id="head" src="head/DjDefault.png" />
        <div id = "headChoose">
        <table>

            <tr>
                <td></td><td></td>
                <td><img class="icon" src="head/DjDefault.png" onclick="DjHead()"/></td>
                <td><img class="icon" src="head/PandaDefault.png" onclick="PandaHead()"/></td>
            </tr>
            <tr>
                <td></td><td></td>
                <td><div class="color" id="norm" onclick="headdefault()"></div></td>
                <td><div class="color" id="blue" onclick="headblue()"></div></td>
                <td><div class="color" id="red" onclick="headred()"></div></td>
                <td><div class="color" id="yellow" onclick="headpink()"></div></td>
            </tr>
        </table>
        </div>

<小时/> 的 JavaScript的：

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);
        });

    }

---