medal の回答履歴
- 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
- lightwindowのキャプション内リンクについて
質問させてください。 現在、lightwindowを画像、動画表示に使用しているのですが、キャプション内にURLリンクを設置したく思っております。 以前、使用していたlightboxでは、キャプション内に <a href="images/image-4.jpg" rel="lightbox" title="<a href="link.html">my link</a>">Image</a> こういった形で表記する事でリンク設置が可能でしたが、lightwindowの場合キャプション内にリンクを表記する事ができませんでした。 なにかリンクを表示させるよい方法をご存知の方、いらっしゃいましたらお教えください。 よろしくお願いいたします。
- 締切済み
- JavaScript
- woody888
- 回答数2
- lightwindowでPDFを表示させるには?
lightwindowを使って、PDFを表示させたいと思っています。 いろいろなサイトを参考にして、以下のようにコーディングしたのですが、 jpgの方はうまく表示されるのに、PDFは何も起こりません。 PDFは何か特別な指定が必要なのでしょうか? <!--Lightwindowスクリプト開始--> <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" /> <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/effects.js"></script> <script type="text/javascript" src="javascript/lightwindow.js"></script> <!--Lightwindowスクリプト終了--> 【うまくいかないPDF】 <a href="file/wind02-1.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"><img src="img/wind02-1mini.jpg" alt="第13号" border="0"></a> <a href="file/wind02-2.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> <a href="file/wind02-3.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> <a href="file/wind02-4.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> 【うまくいくjpg】 <a href="img/8tiiki-1.jpg" class="lightwindow" rel="[no8tiiki]" title="第8号 地域版"><img src="img/8tiiki-1mini.jpg" alt="第8号 地域版" border="0"></a> <a href="img/8tiiki-2.jpg" class="lightwindow" rel="[no8tiiki]" title="第8号 地域版"></a>
- lightwindowでPDFを表示させるには?
lightwindowを使って、PDFを表示させたいと思っています。 いろいろなサイトを参考にして、以下のようにコーディングしたのですが、 jpgの方はうまく表示されるのに、PDFは何も起こりません。 PDFは何か特別な指定が必要なのでしょうか? <!--Lightwindowスクリプト開始--> <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" /> <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/effects.js"></script> <script type="text/javascript" src="javascript/lightwindow.js"></script> <!--Lightwindowスクリプト終了--> 【うまくいかないPDF】 <a href="file/wind02-1.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"><img src="img/wind02-1mini.jpg" alt="第13号" border="0"></a> <a href="file/wind02-2.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> <a href="file/wind02-3.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> <a href="file/wind02-4.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> 【うまくいくjpg】 <a href="img/8tiiki-1.jpg" class="lightwindow" rel="[no8tiiki]" title="第8号 地域版"><img src="img/8tiiki-1mini.jpg" alt="第8号 地域版" border="0"></a> <a href="img/8tiiki-2.jpg" class="lightwindow" rel="[no8tiiki]" title="第8号 地域版"></a>
- lightwindowでPDFを表示させるには?
lightwindowを使って、PDFを表示させたいと思っています。 いろいろなサイトを参考にして、以下のようにコーディングしたのですが、 jpgの方はうまく表示されるのに、PDFは何も起こりません。 PDFは何か特別な指定が必要なのでしょうか? <!--Lightwindowスクリプト開始--> <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" /> <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/effects.js"></script> <script type="text/javascript" src="javascript/lightwindow.js"></script> <!--Lightwindowスクリプト終了--> 【うまくいかないPDF】 <a href="file/wind02-1.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"><img src="img/wind02-1mini.jpg" alt="第13号" border="0"></a> <a href="file/wind02-2.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> <a href="file/wind02-3.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> <a href="file/wind02-4.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> 【うまくいくjpg】 <a href="img/8tiiki-1.jpg" class="lightwindow" rel="[no8tiiki]" title="第8号 地域版"><img src="img/8tiiki-1mini.jpg" alt="第8号 地域版" border="0"></a> <a href="img/8tiiki-2.jpg" class="lightwindow" rel="[no8tiiki]" title="第8号 地域版"></a>