jQueryでページがひらかれたと同時にスライドする方法
- jQueryを使用して、ページがひらかれたと同時に要素をスライドさせる方法を教えてください。
- 現在、「btn1」というIDのボタンをクリックすると、「test2」という要素がスライドダウンするコードを作成していますが、ボタンを押さずにページがひらかれたと同時にスライドさせたいです。
- ご教示いただけると幸いです。よろしくお願いいたします。
- ベストアンサー
jquery教えて下さい。
現在、 <script type="text/javascript"> $(function(){ $("#btn1","#test2").click(function () { $("div","#test2").slideDown(3000); }); }); </script> のコードで btn1のidボタン▼をクリックすると test2がslidedownするコードを造っているのですが これをボタンを押さずに ページがひらいたと同時にスライドするにはどのように すればよろしいでしょうか？ 宜しくお願いします。 <div id="test2"> <div style="display:none;"><div class="slide"> <ul> <li class="setsumei1">test1</li> <li class="setsumei1">test2</li> <li class="setsumei1">test3</li> <li class="setsumei1">test4</li> </ul> </div></div> <div id="btn1">▼</div> </div>
- japa1
- お礼率54% (6/11)
- JavaScript
- 回答数5
- ありがとう数1
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
HTMLの記載が不完全なので間違ってるかも知れんけど、 <body> <div class="fade"> <div class="main"> <div id="tab_contenedor"> <div id="tab_contenido"> <div id="bim1" class="contenido"> <ul> <li><img src="images/inner_b1.jpg" width="504" height="376"></li> <li><img src="images/inner_b1_2.jpg"></li> </ul> <div id="test2"> <div style="display:none;"> <div class="slide"> <ul> <li class="setsumei1">test1</li> <li class="setsumei1">test2</li> <li class="setsumei1">test3</li> <li class="setsumei1">test4</li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript" charset="utf-8"> <!-- $(function(){ $("div","#test2").slideDown(3000); $('.fade').hide(); var i = 0; var int=setInterval(doFade,100); function doFade() { var list = $('.fade').length; if (i >= list) clearInterval(int); $('.fade').eq(i).fadeIn(2000); i++; } }); // --> </script> </body>
その他の回答 (4)
- yyr446
- ベストアンサー率65% (870/1330)
フェードしてからスライドするなら↓ $(function(){ $('.fade').hide(); var i = 0; var int=setInterval(doFade,100); function doFade() { var list = $('.fade').length; if (i >= list) { clearInterval(int); $("div","#test2").slideDown(3000); } $('.fade').eq(i).fadeIn(2000); i++; } });
- fujillin
- ベストアンサー率61% (1594/2576)
jqueryはよく知りませんが、ご提示のコードは動作していますか？ （こちらでテストしても動作しません。 どうもセレクタの記述法が原因のような） それは別として… $(function(){ $("#test2").slideDown(3000); }); では、初期レイアウトですでに表示されている要素に対してslideDownしても、表示されたままとなってしまうようです。 （ご質問の状態がこれではないかと想像しました） $(function(){ $("#test2").hide().slideDown(3000); }); のように、一度非表示にしてから行えばご希望の動作になると思われます。
補足
#test2はdisplay:none;に設定しておりますので上記は関係ないかと思われます。
- ma-tsu
- ベストアンサー率32% (190/593)
アップローダーに上げてみました、確認してみて下さい。 http://www.death-note.biz/up/m/12690.html
補足
ヒントになりました！言葉足らずですみません。 先ほどのタグはさらにdviで囲い、fadeinをつけております。 これをはずすと正常に動きました。 <script type="text/javascript"> $(function(){ $('.fade').hide(); }); var i = 0; var int=0; $(window).bind("load", function() { var int=setInterval("doFade(i)",100); }); function doFade() { var list = $('.fade').length; if (i >= list) { clearInterval(int); } $('.fade').eq(i).fadeIn(2000); i++; } </script> == <div class="fade"> <div class="main"> <div id="tab_contenedor"> <div id="tab_contenido"> <div id="bim1" class="contenido"> <li><img src="images/inner_b1.jpg" width="504" height="376"></li> <li><img src="images/inner_b1_2.jpg"></li> <div id="test2"> <div style="display:none;"><div class="slide"> <ul> <li class="setsumei1">test1</li> <li class="setsumei1">test2</li> <li class="setsumei1">test3</li> <li class="setsumei1">test4</li> </ul> </div></div> </div> 二つとも表現するにはどのようにしたらよろしいでしょうか？
- ma-tsu
- ベストアンサー率32% (190/593)
>btn1のidボタン▼をクリックするとtest2がslidedownするコードを造っているのですが 本当に自分で作っているのなら「▼をクリックすると」の部分を外せばいいだけだとすぐ分かると思うんですけど？ $(function(){ $("div","#test2").slideDown(3000); });
補足
そうなんです、それは何度も試したのですが、はずすとスライドせずにパッとでてしまうんです。 理由はわかりますでしょうか？
関連するQ&A
- JQueryについて教えて下さい。
html部分は <ul> <li>テスト1です。</li> <li>テスト2です。</li> <li>テスト3です。</li> </ul> <div id="test">test</div> となっており、 スクリプト部分は、 $("ul li:not(:first)").css("display","none"); $("#test").click(function(){ if($("+li",this).css("display")=="none"){ $("li").slideUp("slow"); $("+li",this).slideDown("slow"); } }); としています。 やりたいことは、"test"をクリックしたら、 次の"li"が表示されるようにしたいのですが、 動きません。 どなたかご教授よろしくです。
- ベストアンサー
- JavaScript
- jQueryの否定疑似クラスが効かない
いつも、こちらでお世話になっているものです。 日々、jQueryと格闘中でして、 またまたjQuery関連で分からないところが出てきてしまいました。 ボタンを配置していて、そのボタンをクリックしたら lightbox風にコンテンツが表示されるようにしています。 (表示コンテンツは以下スクリプトで言うとdiv.overLayerContents) 表示は問題なくできるのですが、 そのあとに、コンテンツ部分以外をクリックしたら hide()させるように以下のように設定してみました。 ですが、コンテンツ部分をクリックしてもhide()が実行されるのです。 例えば、pとかliとかをクリックしても、hide()が実行され、閉じてしまうのです。 否定疑似クラスをつけず、 #overLayerだけにすると、一応、hide()は機能するので 多分、否定疑似クラス:not～がうまく機能していないみたいなんです。 以下、スクリプトを書きましたので、 詳しい方、ご教授下さい。 どうぞ宜しくお願いいたします。 ▼スクリプト ---------------------- $(function(){ $("#glayLayer , #overLayer:not(.overLayerContents)").click(function(){ $("#glayLayer").hide(); $("#overLayer").hide(); }); $("#btn").click(function(){ $("#glayLayer").show(); $("#overLayer").show().css("marginTop","5px"); return false; }); }); ▼html ---------------------- <div id="glayLayer"></div> <div id="overLayer"> <div class="overLayerContents"> <p>タイトル</p> <ul> <li>コンテンツ1</li> <li>コンテンツ2</li> <li>コンテンツ3</li> </ul> </div> </div> <div id="btn">ボタン</div> ---------------------- ※#glayLayer , #overLayerとも、 最初にcssでdisplay:noneにしています。
- ベストアンサー
- JavaScript
- JQueryを使ってcssを書き換え
何となくコードを見てさわる程度の初心者です。 以下のようなソースを組みました。 <div id="slide"> <a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a> </div> <div id="slidenavi"> <ul> <li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li> <li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li> <li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li> </ul> </div> #slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。 ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。 問題はここからです。 最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。 そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。 この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。 jsファイルは以下の通りです。 $(function(){ $('#slidenavi ul li a').fadeTo(0,0.4); $('#slidenavi ul li a').hover(function(){ $(this).fadeTo(300,1.0); }, function(){ $(this).fadeTo(300,0.4); }) $('#slidenavi ul li img').mouseover(function(){ var bglink = $(this).attr("class"); var altTxt = $(this).attr("alt"); $("#slide img").attr("src","images/home/main/"+bglink); $("#slide img").attr("alt",altTxt); $("#slide span.active").css("display","block"); }); $('#slidenavi ul li a').mouseover(function(){ var Href = $(this).attr('href'); var Tget = $(this).attr('target'); $("#slide a").attr("href", Href); $("#slide a").attr("target", Tget); $("#slide a").click(function() { window.open(Href,'_self'); return false; }); }); });
- ベストアンサー
- JavaScript
- jQueryのclickイベントハンドラ
最近jQueryを勉強中でして、練習の意味で自分で以下のようなページを作ってみました。 【ページの内容】 犬、猫、鳥の画像ボタンを配置して、クリックすると各ボタンのalt属性をアラート表示する 【実際のhtml】 <div class="header"> <ul class="menu"> <li><a href="index.html" id="btn1"><img src="dog.png" alt="Dog"></a></li> <li><a href="index.html" id="btn2"><img src="cat.png" alt="Cat"></a></li> <li><a href="index.html" id="btn3"><img src="bird.png" alt="Bird"></a></li> </ul> </div> 【実際のscript】 $(function(){ var btn1 = $('#btn1'); var photo1 = btn1.find('img'); var name1 = photo1.attr('alt'); btn1.click(function(){ alert(name1); }); var btn2 = $('#btn2'); var photo2 = btn2.find('img'); var name2 = photo2.attr('alt'); btn2.click(function(){ alert(name2); }); var btn3 = $('#btn3'); var photo3 = btn3.find('img'); var name3 = photo3.attr('alt'); btn3.click(function(){ alert(name3); }); }); 上記で一応やりたいことは再現はできるのですが、scriptが冗長なのでもっと短くしたいです。 しかしどんなスクリプトにすればよいかわかりません。 宜しければアドバイスお願いいたします。
- ベストアンサー
- JavaScript
- jQuery開閉式のメニュー実装について
jQueryにて開閉式のメニューを、下記jsを使用し実装したいと思ってるのですが、 下記jsだと、右側から表示するようになっています。 これを左側から表示するようには、js及びcssをどう修正すれば、 実現できるようになりますでしょうか？ あと、デフォルトで「開いた」状態にする場合もどう修正すればよろしいでしょうか。 ■javascript <script type="text/javascript"> $(document).ready(function(){ var panel_DefW = $("#slide_panel").width(); var btn_DefW = 20; $('#slide_panel').width(btn_DefW); $('.menu_off').click(function() { if($("#slide_panel").width() > btn_DefW){ w = btn_DefW; }else{ w = panel_DefW; } $("#slide_panel").animate({ width: w }, "slow", function(){ $('.menu_off').toggleClass('active'); }); }); }); </script> ■html <div id="slide_panel"> <div class="wrap menu_off"> <div class="panel_main"> <h2>メニュー</h2> <ul> <li><a href="#">リストメニュー1</a></li> <li><a href="#">リストメニュー2</a></li> </ul> </div> </div> </div> ■css #slide_panel{ position: absolute; top:200px; right:0; margin: 0; padding: 0 0 0 0; width:220px; height: auto; cursor: pointer; overflow: hidden; } #slide_panel .wrap{ width: 220px; overflow:hidden; 以上になります。 誰かお分かりになる方がいらしましたらお願い致します。
- ベストアンサー
- JavaScript
- Jquery タブで、４つのliのうち、ひとつだけ除外
お世話になります。あともう少しのところでうまくいきません！ http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ１</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ４つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？
- ベストアンサー
- JavaScript
- jqeryについて
[script] $(function() { $(".btn").on('click',function(){ Tmp=$(this).attr('id').replace('button','p'); $(".box").hide(); $("#"+Tmp).show(); }); }); [css] .box{ display:none; } [html] <p id="p1" class="box">テスト１</p> <p id="p2" class="box">テスト2</p> <p id="p3" class="box">テスト3</p> <input type="button" id="button1" value="ボタン1" class="btn" /> <input type="button" id="button2" value="ボタン2" class="btn" /> <input type="button" id="button3" value="ボタン3" class="btn" /> 上記のコードのボタン部分、表示部分を変えたいのですがうまくいかないので教ええてください。 <input type="button" id="button1" value="ボタン1" class="btn" />ここの部分を<p id="tab1 class="tab">に変更し、 <p id="p1" class="box">テスト１</p> ここの部分を <div class="">(cssでアイテム（ul）全体を右に寄せています。) <ul> <a href="/"><li><img src="hoge/hoge1.png"><p>hogehoge</p></li></a> <a href="/"><li><img src="hoge/hoge2.png"><p>hoge</p></li></a> </ul> </div> よろしくお願いします。
- ベストアンサー
- JavaScript
- ｊQuery UIについて
今ｊQueryUITabｓというプラグインを使ってタブによる切り替えを行おうとしています。 このプラグインでは、タブの内容をajaxのように他のページを読み込めるとのことで 以下のようなコードを書いてみました。 この場合に、tabs.htmlの方で、読み込んだ先のフォームがクリックされたのを検知するには どうしたらよいのでしょうか。 単純に、tabs.htmlのスクリプトの部分に次のようなコードを書いても「Undifined」が表示されてしまいました。 $("#form1").submit(function(){ alert($("#form1_text").val()); }); もし解決策をご存知でしたら、ご教授お願いいたします。 --------- Tabs.html ------------------ ++++++script++++++++ $(function(){ $("#tabs").tabs(){}); }) ++++++script++++++++ ++++++html++++++++ <div id ="tabs"> <ul> <li><a href = "test1.html">テスト１のフォーム</a></li> <li><a href = "test2.html">テスト２のフォーム</a></li> </ul> </div> ++++++html++++++++ --------- Tabs.html ------------------ --------- test1.html ------------------ <form id = "form1"> <input type = "text" id = "form1_text"> <input type = "submit" id = "form1_submit"> </form> --------- test1.html ------------------ --------- test2.html ------------------ <form id = "form2"> <input type = "text" id = "form2_text"> <input type = "submit" id = "form2_submit"> </form> --------- test2.html ------------------
- 締切済み
- JavaScript
- jquery中のmatch関数が正常に動作しません
<ul> <li id="1" class="comment-set"> <div class="txt"> foo1 </div> </li> <li id="2" class="comment-set"> <div class="txt"> foo2 </div> </li> <li id="3" class="comment-set"> <div class="txt"> foo3 </div> </li> <li id="4" class="comment-set"> <div class="txt"> >>1 foo4 </div> </li> <li id="5" class="comment-set"> <div class="txt"> foo5 </div> </li> </ul> というリストの中で、>>1などとアンカーがついているli要素のみ削除したいと思います。 (上の例だとid="4"のli要素です) 下からループして、文章中に">>(数字)"の形を含むものを見つけたらremove処理を実行しようと思います。 そこで以下のようなコードを書いて走らせたのですが、動作しません。 <script type="text/javascript"> $(function() { var size = $('li.comment-set').length; while(size>0) { var foo='#'+size; console.log(foo); var bar = $(foo).match(/\>\>(\d+)$/); if(bar){ $(foo).remove(); } size = size-1; } }); </script> コンソールには、 [15:21:28.514] TypeError: $(...).match is not a function @ http://localhost/comment_test/index.php:80 というエラーが表示されています。 原因に皆目見当がつかないため、どなたか解決方法を教えていただきたいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jqueryの$.getJSONの処理結果について
jqueryの$.getJSONの結果およびその違いについて教えてください。 以下の(1)と(2)の処理があり、(2)を(1)と同じ様に 出力したいと考えておりますが、(2)では(1)のように 「class="ui-li-static ui-body-inherit ui-first-child"」などが 設定されずに出力されてしまいます。 そのため、どのように記述すれば(1)と同じ結果になるのかを ご教授いただけますでしょうか。 また、宜しければ(1)と(2)の処理の違いを 教えていただけると助かります。 ※chrome バージョン 43.0.2357.81 apache-tomcat-7.0.53 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ (1)固定値で埋め込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $('#listviewtest').append('<li>1:aaaaaaa</li>'); $('#listviewtest').append('<li>2:bbbbbbb</li>'); $('#listviewtest').append('<li>3:ccccccc</li>'); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ui> </div> </div> </body> </html> 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li class="ui-li-static ui-body-inherit ui-first-child">1:aaaaaaa</li> <li class="ui-li-static ui-body-inherit">2:bbbbbbb</li> <li class="ui-li-static ui-body-inherit ui-last-child">3:ccccccc</li> </ul> (2)$.getJSONで読み込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $.getJSON( 'test.js', null, function(data, status) { var items = []; $.each(data, function(key, val) { items.push('<li>' + val.id + ':' + val.name + '</li>'); }); $('#listviewtest').append(items.join('')).trigger('create'); } ); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ul> </div> </div> </body> </html> 外部ファイル（test.js） [ {"id":1,"name":"aaaaaaa"}, {"id":2,"name":"bbbbbbb"}, {"id":3,"name":"ccccccc"} ] 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li>1:aaaaaaa</li> <li>2:bbbbbbb</li> <li>3:ccccccc</li> </ul>
- ベストアンサー
- JavaScript
お礼
本当にありがとうございます！！ なお追記でお伝え頂いていた物も まさに使いたかった物です！！ 本当にありがとうございます！！ 今後とも宜しくお願いします！