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の使い方が間違っているのでは思い、
自分で調べてできそうなことは全て試しましたが、
どうにもこうにも解決の糸口さえ見つかりません。

どうかご助言をお願いいたします。

回答No.1

ANASTASIAK · ベストアンサー

おそらく、タイマーセットのところを次のものと差し替えれば
うまく行くと思いますが・・・

// タイマーセット
timerID = setTimeout("imgSwapOver('" + imgId + "')",1000);

お礼

さっそくのお返事、ありがとうございます！

// タイマーセット
var timerID = setTimeout("imgSwapOver('" + imgId + "')",1000);
↑varを取って見ましたが、やはり結果は同じで、アニメーションが最後のコマまで行く前にマウスアウトすると、希望通りの動きをしてくれません。

FireFoxのJavaScript コンソールでも特にエラーは出ません。どうすればよいのでしょうか？

回答No.2

noname#23734

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

お礼

できました！！！ありがとうございました！
マウスアウトの一部に
if (aframe != 1) {aframe = 1; clearTimeout(timerID); }
にように、clearTimeout(timerID);を足しましたらバッチリでした。
実はこれも以前にやってみたことの一つだったのですが、最初のレスの方にご指摘いただいた箇所、var timerIDの部分にvarがついていたため、希望通りの動作にはならなかったようです。timerIDは未定義だと言われ、aframeは残ってるのになんで～！とパニクッてました。

いやはや、関数で定義したローカル変数や配列は、残らないのは知っていましたが、このような場合、関数の中で再定義するのもNGなんですね。大変勉強になりました。

お二人ともアドバイスをどうもありがとうございました！！