Question

I am writing a small animation to a div: Flag flips when you click on it. On the click, the image has to change.

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

My observations: The first flag flip works, but does not animate the second part, because I remove #flag, and replace it. The next flips do not work, because flipping is still false.

How to solve this, and continue animating, but replacing the content of the div?

Answer 1

The problem was that I has two divs with the same ID, not that I was changing the div I was animating.