• ベストアンサー

setTimeoutと擬似アニメーション

いつもお世話になっております。 またもどんづまってしまい、質問をお許しください。(T-T) 【画像Aにマウスが乗ったら】、画像Bを start.gif(初期状態) → process1.gif → process2.gif → result.gif(ここで止まる/繰り返しなし) と擬似アニメーションさせて、 【画像Aからマウスが離れたら】、画像Bを最初の画像であるstart.gifに戻す、 ということをやりたくて以下のように書いてみました。 http://www.wendo.jp/temp/abc.html これで何となく希望通りの動作はするのですが、 どうしても二つ問題点が出てきてしまいます。 1). アニメーションが途中のフレーム(process1やprocess2)の時に、 マウスを離すと、start.gifにして止まって欲しいのに、 一瞬、start.gifが出た後、もう一度process1.gifに戻って アニメーションが再開してしまう。 そして最後のresult.gifまで行って止まる。 2). 上記のように、最後のフレームまで行かずにマウスを離した場合、 再度マウスオーバーしても、アニメーションが始まらない。 なお、確認はFireFox 1.5 と IE6でしております。 setTimeout/clearTimeoutの使い方が間違っているのでは思い、 自分で調べてできそうなことは全て試しましたが、 どうにもこうにも解決の糸口さえ見つかりません。 どうかご助言をお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • ANASTASIAK
  • ベストアンサー率19% (658/3306)
回答No.1

おそらく、タイマーセットのところを次のものと差し替えれば うまく行くと思いますが・・・ // タイマーセット timerID = setTimeout("imgSwapOver('" + imgId + "')",1000);

r_bel
質問者

お礼

さっそくのお返事、ありがとうございます! // タイマーセット var timerID = setTimeout("imgSwapOver('" + imgId + "')",1000); ↑varを取って見ましたが、やはり結果は同じで、アニメーションが最後のコマまで行く前にマウスアウトすると、希望通りの動きをしてくれません。 FireFoxのJavaScript コンソールでも特にエラーは出ません。どうすればよいのでしょうか?

その他の回答 (1)

noname#23734
noname#23734
回答No.2

onmouseoutでもclearTimeoutしてみたら如何でしょうか。

r_bel
質問者

お礼

できました!!!ありがとうございました! マウスアウトの一部に if (aframe != 1) {aframe = 1; clearTimeout(timerID); } にように、clearTimeout(timerID);を足しましたらバッチリでした。 実はこれも以前にやってみたことの一つだったのですが、最初のレスの方にご指摘いただいた箇所、var timerIDの部分にvarがついていたため、希望通りの動作にはならなかったようです。timerIDは未定義だと言われ、aframeは残ってるのになんで~!とパニクッてました。 いやはや、関数で定義したローカル変数や配列は、残らないのは知っていましたが、このような場合、関数の中で再定義するのもNGなんですね。大変勉強になりました。 お二人ともアドバイスをどうもありがとうございました!!

関連するQ&A

専門家に質問してみよう