2011-11-15 14 views
0

私はdivに小さなアニメーションを書いています:クリックするとフラグが反転します。クリックすると、画像が変更されます。編集オブジェクトwhile animating

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

私の観察結果:第1フラグフリップ作品が、私ので、第二部をアニメーション化しません。 #flagを削除して置き換えます。次のフリップは機能しません。フリップがまだ間違っているからです。

これを解決し、アニメーションを続けるが、divの内容を置き換える方法は?

+1

同じidを使用している2つの要素は良いアイデアではありませんid = "flag" –

+0

実際はひどい考えです。 id属性は、ページ上の要素を一意に識別するものとします。それを行うための別の方法を見つけると私の推測では、それまでにあなたの問題を解決したでしょう。 – Matthew

+0

あなたは大変正しいです。愚かな、私はそれを修正する、私は問題が解決することを望む(私はそう、私はまだアニメーション中にコードを置き換えているとは思わない)。私は知っているとすぐに書きます。 – Hidde

答えて

0

問題は、同じIDの2つのdivがあり、アニメーション化していたdivを変更していないことです。