jQuery pngアニメを同ページ内に複数配置
よろしくお願いいたします。
http://blog.rettuce.com/animation/animation-jpg/
こちらを参考に、jquery＋png画像でgifアニメのようなアニメーションを作成しています。
サンプルの通りに作成すると問題なくアニメーションになっているのですが、
同じページ内に複数の異なるアニメーションを配置すると、うまく表示できず、おかしな動作になります。
javascriptは以下のように記述しています。
//アニメーション1
<script type="text/javascript">var id = "test1";
var width = 50;
var height = 50;
var fps = 10;
var src = "test1.png";
var frame = 0;
var max_frame = 10;
var onceFlg = false;
$(document).ready(
function (){
$("#"+id).css({
"background":"url("+src+")",
"width":width,
"height":height
});
var interval = 1/fps*1000;
animation = setInterval(intervalEvent, interval);
});
function intervalEvent(){
$("#"+id).css({
"background-position":"0 "+ -height * frame +"px"});
frame++;
if(frame>=max_frame){
if(onceFlg) clearInterval( animation );
frame = 0;
};
}
</script>
//アニメーション2
<script type="text/javascript">
var id2 = "test2";
var width = 500;
var height = 300;
var fps2 = 5;
var src2 = "test2.png";
var frame2 = 0;
var max_frame2 = 5;
var onceFlg2 = false;
$(document).ready(function (){
$("#"+id2).css({
"background":"url("+src2+")",
"width":width,
"height":height
});
var interval2 = 1/fps2*1000;
animation2 = setInterval(intervalEvent2, interval2);
});
function intervalEvent2(){
$("#"+id2).css({"background-position":"0 "+ -height * frame2 +"px"});
frame2++;
if(frame2>=max_frame2){
if(onceFlg2) clearInterval( animation2 );
frame2 = 0;
};
}
</script>
-------
それぞれ、一つずつ記述したときは、どちらも想い通りに動くのですが、
両方記述した際に、以下の２点のようになります。
1.アニメーション1が23×23個表示される
■ ←これをアニメーションだとすると、
■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■
・
・
・
という風に表示されます。
2.上記のjavascriptの記述のアニメーション1とアニメーション2の順序を入れ替えると、
アニメーション1は正しく表示され、アニメーション2が表示されなくなります。。
それぞれ個別では動いているので、複数配置するときのjavascriptの書き方が間違っているのかと思うのですが、
原因をもしご存知でしたらお教えいただきたいと思い、質問させていただきました。
どうぞよろしくお願いいたします。
補足
ループ設定をしてみたのですが、 先程と同じように反応が無いようでした。 ご回答有り難うございます！