редактировать объект во время анимации - PullRequest
Новая
       12

редактировать объект во время анимации

0 голосов
/ 15 ноября 2011

Я пишу небольшую анимацию в 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?

1 Ответ

0 голосов
/ 16 ноября 2011

Проблема заключалась в том, что у меня есть два элемента div с одинаковым идентификатором, а не то, что я менял элемент div, который я анимировал.

...