在动画时编辑对象

edit object while animating

本文关键字：对象 编辑 动画      更新时间：2023-09-26

我正在给div写一个小动画:当你点击它时，Flag会翻转。点击后，图像必须改变。

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的内容?

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

相关文章：