动画时编辑对象

Question

我正在为div写一个小动画：当你点击它时，标志会翻转。点击后，图片必须改变。

HTML：

<div id="lang"></div>
...
<div id="langnl" class="invisible">
        <img id="flag" src="en.jpg" onclick="change(-1,'en')"/>
    </div>
    <div id="langen" class="invisible">
        <img id="flag" src="nl.jpg" onclick="change(-1,'nl')"/>
    </div>

CSS：

    .footer #lang {
        float:right;
        width: 30px;
        height: 20px;
text-align:center;
    }
    .footer #lang img {
        width: 30px;
        height: 20px;
        margin: 0px auto;
        border-radius: 5px;
    }

JS：

if (!flipping) {
            flipping = true;
            $('#flag').animate( {
                width: 0,
            }, flipTime, function () {
                $('#lang').html($('#lang'+lang).html());
            }).animate( {
                width: 30,
            }, flipTime, function () {flipping = false;});
        }

我的观察：第一个标志翻转工作，但不动画第二部分，因为我删除#flag，并替换它。下一次翻转不起作用，因为翻转仍然是假的。

如何解决这个问题，并继续动画，但更换div的内容？

Answer 1

问题是我有两个具有相同ID的div，而不是我正在改变我动画的div。