jQueryの使用方法と疑問点
- jQueryの使用方法と疑問点について説明します。
- 質問1では、marginの使用方法について疑問があります。質問2では、opacityの数値の表記方法について疑問があります。
- それぞれの疑問点について詳しく説明する前に、jQueryの基本的な使い方を理解しておく必要があります。
- ベストアンサー
jquaryについて質問2
<script type="text/javascript"> <!-- $(function(){ $("#s1 p").on("click",function(){ $(this).animate({ color:"#00ffff" }, 1500 ); }); }); --> </script> </head> <body> <div id="s1"> <p>あいうえお</p> </div> </body> うまくいきませんでした。 あといくつか疑問に思う事がありました。 $(function(){ $("#s1 p").on("click",function(){ $(this).animate({ marginLeft:"100px" }, 1500,"swing" ); }); }); 質問1 本ではmarginをつけないで作動するそうです。 しかし自分のはできなったのでmarginをつけました。 つけないタイプは、ｃｓｓでいうところのposition absoluteを事前にしないと この記述になりません。書き方としてはmarginをつけるべきだと思うんですが。。。 質問2 もうひとつopacityのときの数値はコーテーションをいれませんでした。 ですがmarginなどの数値を入れるときにはいれます。 あえてpxという文字が関わっているとしたらparseIntなどの 関数が必要なんではないでしょうか？ 毎度すみませんがお願いします
- yonbakukan
- お礼率7% (11/148)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
jquaryではなくjQueryです。 カラーをアニメーションするには別途プラグインが必要です。 以下は古いバージョンのjQueryで言及してますが、色のアニメーションについて述べています。 http://h2ham.seesaa.net/s/article/107837321.html 質問1 突然マージンと言われてもなにがしたいかわかりません。 marginLeftではなくmargin-leftでは？ 質問2 数値ならばいりません。px, %などがある場合は文字列となるので必要です。基本的にはくくっておけば問題ありません。
関連するQ&A
- ｃｓｓ3にしないといけないのでしょうか
<!-- $(function(){ $("#s1 p").on("click",function(){ $(this).animate({ color:"#00ffff" }, 1500 ); }); }); --> </script> </head> <body> <div id="s1"> <p>あいうえお</p> </div> </body> プログラムはできているんですが、例えば カルーセルなどの時間設定はもしかするとcss3でないとできないのではないでしょうか？
- ベストアンサー
- JavaScript
- opacityについて
$(function(){ $("#s1").animate({ $(this).css("opacity","0") },3000); }); html <div id="s1"><img src="1" width="300px" height="300px"></div> 質問：消えると思ったのですが、3秒後に画像が消えませんでした。 できないのでしょうか？ 画像を時間で消える方法があればご教授ください
- ベストアンサー
- JavaScript
- どうしてもわかりません カルーセル
$(function(){ $("#s2").click(function(){ $("#s4").animate({marginLeft:parseInt($("#s4").css("marginLeft"))-300+"px"},"slow","swing", function(){ $("ul.s5:first").appendTo("#s4"); $("#s4").css("marginLeft","0px"); }); }); $("#s6").click(function(){ $("#s4").animate({marginLeft:parseInt($("#s4").css("marginLeft"))+200+"px"},"slow","swing", function(){ $("ul.s5:lest").appendTo("#s4"); $("#s4").css("marginLeft","-300px"); }); }); }); 左まわり？はできるんですが、逆方向がどうしてもできません。 animate({marginLeft:parseInt($("#s4").css("marginLeft"))+200+"px"},"slow","swing", のぶぶんが実はよくわかってません。 +200+"px"の部分は回転させる方向なわけですが だとすると、ある特定の位置までいったらappendなりprependがかかって 画像がお尻？につくという事なわけですが 逆方向はそうはならない。なぜなんだろうと納得できないわけです。 すいません。お願いします
- ベストアンサー
- JavaScript
- jqueryでのkeydownイベント発生回数制御
main.html************************************* <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <link href="css/ffUI.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/ffmain.js"></script> </head> <body> <div id="main"> </div> </body> </html> ffUI.css*************************************** * {margin:0;padding:0;} #main {width:320px;height:240px;overflow:hidden;} #map {margin-top:0px;margin-left:0px;} ffmain.js************************************** mainFunction(); function mainFunction(){ $("#main").append('<div id="map"><image src="image/maptest.gif"></div>'); $(window).bind("keydown",mainKeyIvent); } function mainKeyIvent(e){ switch(e.keyCode){ case(38): $("#map").animate({marginTop:"+=16px"}); break; case(40): $("#map").animate({marginTop:"-=16px"}); break; case(37): $("#map").animate({marginLeft:"+=16px"}); break; case(39): $("#map").animate({marginLeft:"-=16px"}); break; } } というコードを書いて、RPGのMAPのように、 出した画像が上下左右のキーで16ピクセルずつ動くコードを書いてみたんですが、 一応動きはしますが、キーを押しっぱなしにすると、 その間にキーイベントが蓄積されて、右を押していたら、 キーを離してもずーっと右に動きっぱなしなってしまったりします。 押している間は動き続けてもいいですが、離した瞬間にちゃんと止まるようにしたいんですけど、 どのようにコーディングすればよいでしょうか？ 環境はsafariです。 宜しくお願いしますm(__)m
- ベストアンサー
- JavaScript
- 画像スライダーをやってますが
<script type="text/javascript"> <!-- $(function(){ var sty=$("#s1"); sty.each(function(){ var mo1=$(this); var mo2=mo1.find("ul"); var mo3=mo1.find("li"); var mo4=mo1.find("li:first"); mo3.css({display:"block",opacity:"0",zIndex:"1"}); mo4.css({zIndex:"2"}).stop().animate({opacity:"1"},3500); setInterval(function(){ mo2.find('li:first-child').animate({opacity:'0'},1500).next('li').css({zIndex:'100'}).animate({opacity:'1'},1500).end().appendTo(mo2).css({zIndex:'99'}); },5000); }); }); --> </script> </head> <body> <div id="s1"> <ul> <li><img src="rtp/7.jpg" width="300px" height="300px"></li> <li><img src="rtp/9.jpg" width="300px" height="300px"></li> <li><img src="rtp/10.jpg" width="300px" height="300px"></li> </ul> </div> </body> </html> 見よう見まねで成功はしましたが、見真似なのでどういう構造なのか勉強しているところです。 今日は前半をなんとかやったんですが mo3.css({display:"block",opacity:"0",zIndex:"1"}); の部分のdisplay:"block"はなぜやっているのかが解りませんでした。 最初の設定は画像を消すところだと思うのですが、だとするとなぜblockなのかが解りません。
- ベストアンサー
- JavaScript
- JQUERYについて教えてください。
JQUERYについて教えてください。 readyがDOMを読み終わってから実行しろという意味は分かったのですが、 あったりなかったりするfunction()はどんな意味なのでしょうか？ function(){ $(this).stop().animate({'marginBottom':'60px'},150); },function(){ $(this).stop().animate({'marginBottom':'0px'},120); こちらにあるのですがメソッドに一個必須なのでしょうか？ 例 <script type="text/javascript"> $(document).ready(function(){ $('div#goto_top').hover( function(){ $(this).stop().animate({'marginBottom':'60px'},150); },function(){ $(this).stop().animate({'marginBottom':'0px'},120); </script>
- ベストアンサー
- JavaScript
- そろそろカルーセルでアドバイス
お願いします。 $("#s1").click(function(){ $("#s2".animate({marginLeft:parseInt($("#s2").css("marginLeft"))-200+"px"},"slow","swing", function(){ $("ul:first").appendTo("#s2") $("#s2").css("marginLeft","0px") }); }); と例えばこんな感じで時間で画像が動くようにしたいのですが どこで時間的な設定したらいいのかが解りません。 時間で動く関数とか教えてください
- 締切済み
- JavaScript
- ｊQueryでulを動かしたい。
javascript初心者です。 jQueryを使ってみようとしています。 ページを開くと、リストが左にゆっくり動くようにしたいのです。 cssは ul { position: absolute; margin-top: 0; margin-left: 490px; padding-left: 15px; height: 40px; list-style-type: none; } でページを開くとmargin-leftを460pxにゆっくり動かしたいのです。 調べてみるとanimateが使えそうなので、 window.onload = function(){ $("#contents ul").animate("marginLeft","460px"); } にしてみましたが、動きません・・・。 教えていただけるとありがたいです。 お願いしますm(__)m
- 締切済み
- JavaScript
- 【jQuery】サムネイル
3つのサムネイル画像(.thumb)があります。 クリックした.thumbはopacityを1に、その他は0.5に切り替わる する方法を教えてください。 始めは1番目.thumbのopacityは1でお願いします。 ■html <div id="ph-wrap"> <div id="photo"> <p><img src="./img/photo1.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo2.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo3.png" width="480" height="320" alt="" /></p> </div> <div id="thumb-wrap"> <p class="thumb"><img src="./img/photo1.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo2.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo3.png" width="120" height="80" alt="" /></p> </div> </div> ■CSS(一部抜粋) #thumb-wrap{ float:left; margin:0 0 0 10px; padding:0; width:120px; } #thumb-wrap img{ width:120px; height:80px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; /* Firefox */ filter: alpha(opacity=50); /* IE */ } .opc{ opacity:1.0; -moz-opacity:1; /* Firefox */ filter: alpha(opacity=100); /* IE */ } ■jQuery $(function () { var photoImg = "#photo img" var thumbWrapImg = "#thumb-wrap img" $("#photo p:gt(0)").hide(); $(thumbWrapImg).eq(0).css({"opacity":1}); $(thumbWrapImg).click(function () { $(this).animate({"opacity":1},100); $(photoImg).attr("src",$(this).attr("src")); }); });
- ベストアンサー
- JavaScript
- html内にあるJavaScriptを外部に出したいのですが、書き方が
html内にあるJavaScriptを外部に出したいのですが、書き方が分かりません。 ご指導をお願いします。 【現在html】 <script type="text/javascript"> $(function(){ //初期設定 $("#carouselInner").css("width",620*$("#carouselInner ul.column").size()+"px"); $("#carouselInner ul.column:last").prependTo("#carouselInner"); $("#carouselInner").css("margin-left","-620px") //戻るボタン $("#carouselPrev").click(function(){ $("#carouselNext,#carouselPrev").hide(); $("#carouselInner").animate({ marginLeft : parseInt($("#carouselInner").css("margin-left"))+620+"px" },"slow","swing" , function(){ $("#carouselInner").css("margin-left","-620px") $("#carouselInner ul.column:last").prependTo("#carouselInner"); $("#carouselNext,#carouselPrev").show(); }) }) //進むボタン $("#carouselNext").click(function(){ $("#carouselNext,#carouselPrev").hide(); $("#carouselInner").animate({ marginLeft : parseInt($("#carouselInner").css("margin-left"))-620+"px" },"slow","swing" , function(){ $("#carouselInner").css("margin-left","-620px") $("#carouselInner ul.column:first").appendTo("#carouselInner"); $("#carouselNext,#carouselPrev").show(); }) }) // 8秒間隔でスクロール var timerID = setInterval(function(){ $("#carouselNext").click() },8000) // ユーザーが操作すると、タイマーを停止 $("#carouselPrev img,#carouselNext img").click(function(){ clearInterval(timerID); }) }) </script>
- ベストアンサー
- JavaScript
補足
最初の答え、 具体的になにをしたらこのカラープラグインはできるようになるんでしょうか？ どっからかダウンロードするんでしょうか？ 質問1 もともと例えば右にある文字を動かしたりする場合 marginLeftを使いました。