medalのプロフィール
- ベストアンサー数
- 3
- ベストアンサー率
- 100%
- お礼率
- 0%
- 登録日2008/10/22
- jqueryのアニメーションが動かない!!
$(".skinTitleArea").css("opacity","0"); $(function(){ $(".skinTitleArea").animate({"opacity","1"},500); }; って入れても動かない。 http://ameblo.jp/koko5666/ アメブロなのですが、append等はちゃんと反映されてるのでjquery本体は読み込まれてます。なのにアニメーションanimateが動かない。入れるとjqueryが読み込まなくなって、他の記述も反映されなくなる。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js"></script> アニメーションが入ってるjavascriptは現在消してます https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js
- ベストアンサー
- JavaScript
- blo198
- 回答数1
- 特定のスライドだけ長く止める方法
jquery.cycle(http://jquery.malsup.com/cycle/)を使用してiframeのスライドショーを 作成しました。 切り替えの際に、3秒間隔⇒3秒間隔⇒10秒間隔⇒3秒間隔というように 特定のスライド箇所のみで長く止めたいです。ループして戻ってきた時も含めてです。 こうした処理をするにはどうすれば良いでしょうか。 上記のライブラリじゃなくてもかまいません。 何か方法はないでしょうか。
- ベストアンサー
- JavaScript
- 25taku
- 回答数2
- javascriptを使って文字を表示させたい
javascriptを使ってdivタグをクリックしたらdivタグの中に文字を表示させたいのですが、どのように記述すればよいのでしょうか?
- 締切済み
- JavaScript
- aaaairiiii
- 回答数3
- 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> ------- それぞれ、一つずつ記述したときは、どちらも想い通りに動くのですが、 両方記述した際に、以下の2点のようになります。 1.アニメーション1が23×23個表示される ■ ←これをアニメーションだとすると、 ■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■ ・ ・ ・ という風に表示されます。 2.上記のjavascriptの記述のアニメーション1とアニメーション2の順序を入れ替えると、 アニメーション1は正しく表示され、アニメーション2が表示されなくなります。。 それぞれ個別では動いているので、複数配置するときのjavascriptの書き方が間違っているのかと思うのですが、 原因をもしご存知でしたらお教えいただきたいと思い、質問させていただきました。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- pencil87
- 回答数4
- 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> ------- それぞれ、一つずつ記述したときは、どちらも想い通りに動くのですが、 両方記述した際に、以下の2点のようになります。 1.アニメーション1が23×23個表示される ■ ←これをアニメーションだとすると、 ■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■ ・ ・ ・ という風に表示されます。 2.上記のjavascriptの記述のアニメーション1とアニメーション2の順序を入れ替えると、 アニメーション1は正しく表示され、アニメーション2が表示されなくなります。。 それぞれ個別では動いているので、複数配置するときのjavascriptの書き方が間違っているのかと思うのですが、 原因をもしご存知でしたらお教えいただきたいと思い、質問させていただきました。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- pencil87
- 回答数4