- ベストアンサー
jQueryでスライドしながらフェードするボックスのメニューの作り方
- jQueryで横にスライドしながら表示されるボックスのメニューを作成しました。
- スライド表示される際に透明度を0から1にする方法がわかりません。
- スライドしながら透明度も変更するにはどうすれば良いのでしょうか。
- shingorin
- お礼率38% (10/26)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- jQuery1.4.2、jQueryUI1.8.4、toggle()の
jQuery1.4.2、jQueryUI1.8.4、toggle()の状態を初期化 jQuery1.4.2、jQueryUI1.8.4にて、 toggle()を使用したあと、別のボタンなどで、そのtoggleの状態を初期化することは出来るのでしょうか。 <a id="button">ボタン</a> <div id="info"> <a id="close">閉じる</a> <p>あいうえお</p> </div> <script> $('#button').toggle( function(){$('#info').show('slide')}, function(){$('#info').hide('slide')} ); $('#close').click(function(){$('#info').hide('slide');}); </script> 「ボタン」を押して#infoを表示した後、「閉じる」を押して非表示にし、 もう一度「ボタン」を押すと、hide()が実行されてしまうため、このときにshow()が実行されるようにしたいのです。 フラグを使って.click()で切り替えれば作れますが、 せっかくtoggle()のようなメソッドがあるなら、それを利用できないかと思ったのですが。
- ベストアンサー
- JavaScript
- jqueryの構文について
はじめまして、最近jqueryの勉強を始めました。 セレクタを変数で指定した場合の子要素の取得の仕方がわからず、困っています。 アドバイスいただけませんか？ <html> <head> <title></title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#next").click(function () { //下のように書いてみたのですが動きません。 var next_slide = $("#slide01").next(); $(next_slide).text("hoge");//これは動きます var img_url = $(next_slide > a).attr("href");//エラーを起こします alert(img_url); return false; }); }); </script> </head> <body> <ul> <li id="slide01"><a href="url01">スライド01</a></li> <li id="slide02"><a href="url02">スライド02</a></li> <li id="slide03"><a href="url03">スライド03</a></li> </ul> <a href="#" id="next">次へ</a> </body> </html> 要は次の要素の子要素にアクセスしたいのです。 ご教授のほどよろしくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
- jqueryについて
ただいま、jqueryのtoggle()を使って、 チェックボックスのON/OFFでimgのclassを切り替える（imgをクリックしてチェックボックスをON/OFFもできる）ということを しているのですが、なぜか、チェックボックスをクリックしても、 ボタンの反応はしているのですが、チェック（黒い「レ」）が表示されません。 以下、jsです。 ※チェックボックスと画像の組み合わせは複数あります。 $(function(){ $("li.p01").toggle( function(){ $("input.c01").attr("checked","checked"); $("li.p01").attr("class","p01on"); }, function(){ $("input.check01").removeAttr("checked"); $("li.p01on").attr("class","p01"); } ); $("input.check01").toggle( function(){ $("li.p01").attr("class","p01on"); }, function(){ $("li.p01on").attr("class","p01"); } ); $("li.p02").toggle( function(){ $("input.check02").attr("checked","checked"); $("li.p02").attr("class","p02on"); }, function(){ $("input.check02").removeAttr("checked"); $("li.p02on").attr("class","p02"); } ); $("input.check02").toggle( function(){ $("li.p02").attr("class","p02on"); }, function(){ $("li.p02on").attr("class","p02"); } ); }); ご教授お願いいたします。 また、ボタンが10個あるのですが、 このまま、複製していくのもどうかと思うんですが、 もっと簡単にまとめる方法などあるのでしょうか。 ご回答よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryスライドプラグイン
jQueryスライドプラグイン FLASHを使用せずにjQueryのプラグインで以下のような表現は可能でしょうか？ http://www.starcat.co.jp/ 以下が実現したいです。 ・メイン画像がフェードまたは、スライドで切り替わる ・メイン画像クリックで別のページへリンク ・サムネイルクリックでメイン画像が切り替わる ・ランダムで表示できる ・自動で遷移する。
- 締切済み
- JavaScript
- jqueryについて【初歩】
見ていただきありがとうございます。 jqueryについて初歩的な質問です。 下記の記述は ひとつのボックスに対して内包するaタグのリンクを指定してボックスごとリンクにしているスクリプトになりますが、これにtargetの属性を付加させたいです。 しかしいろいろ試しましたがうまくいかず、ツンでます… jqueryに精通している方宜しければご回答いただけませんでしょうか？ よろしくお願いいたします。 $(function(){ $(".sampleBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); });
- 締切済み
- JavaScript
- jqueryでtoggleを無制限に繰り返したい
下記のhtmlテキストのjquery記載部分について質問させていただきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>toggle繰り返し</title> </head> <body> <p>toggle繰り返し</p> <div id="box" style="width:150px;height:150px;background:blue;"> </div> <script src="http://code.jquery.com/jquery-1.10.1.min.js"> </script> <script> $(function() { $('#box').toggle(1000); $('#box').toggle(1000); $('#box').toggle(1000); $('#box').toggle(1000); $('#box').fadeOut(1000, function() { }); }); </script> </body> </html> 上記のhtmlの上から14行目～17行目に記載してあるにあるscript部分に、 $('#box').toggle(1000); を4回記載しているため、 4回、繰り返しフェードアウトが実行されています。 DreamWeaverCS6で作成し、ブラウザIE10、firefox24.0で動作確認しています。 ここで質問ですが、この回数を無制限に、つまり永久に繰り返すようにするには、どのようにすればよいのでしょうか？具体的なコードを記載していただけると助かります。 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- jQueryで4枚の画像がフェードアウトで切り替え
4枚の画像をフェードアウトで切り替えるものをjQueryのサイトを参考に作成しました。 そこで、その右側に4つのボタンのようなものを配置し、 1枚目の画像が表示されているときは1つめのボタンが 2枚目の画像が表示されているときには2つめのボタンが 選択されたような状態になり、 「現在表示されている画像はこのボタンのものです」というようなものを実行したいです。 途中まで、作業は進んでおり、 ■javaScript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#contentsleft'; var fadeSpeed = 1500; var switchDelay = 4000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); ■HTML <div id="contentsleft"> <img src="./imgs/aaa01.jpg" alt="ホーム"> <img src="./imgs/bbb02.jpg" alt="ホーム"> <img src="./imgs/ccc03.jpg" alt="ホーム"> <img src="./imgs/ddd04.jpg" alt="ホーム"> </div> <button id="btn01">１</button> <button id="btn02">２</button> <button id="btn03">３</button> <button id="btn04">４</button> となっています。 javaScriptのところで、1枚目が表示されているときに1つめのボタンを選択状態にする。 というような処理を施せばよいのでしょうが、知識不足でお手上げ状態です。 ご教授いただければと思います。 よろしくお願いします。
- ベストアンサー
- JavaScript
- Jqueryスライドが動きません。教えてください
WEB制作の素人です。 皆さんが簡単といわれている「FlexSlider2」ですが、画像は出たもののスライドにならず、 登録した画像がそのまま出てしまいます。 一度見ていただけますでしょうか？（ちなみにスムーススクロールは動きます） <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slider"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします
- ベストアンサー
- JavaScript
- jqueryについて
jqueryについて こんな内容のjqueryをひとつにまとめて、なおかつ01～99（実績数）までのidを割り振る設定したいのですが可能でしょうか？ 例えば $(function(){ $("#navi01-99 a").click(function(){ $("#main01-99 img").attr("src",$(this).attr("href")); return false; }); みたいな感じであとはidに番号を付ければいいみたいな・・・出来ませんでしょうか？ 用途は仕事の制作実績で使用したいのですが、どなたか教えていただけますでしょうか？ $(function(){ $("#navi01 a").click(function(){ $("#main01 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi02 a").click(function(){ $("#main02 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi03 a").click(function(){ $("#main03 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi04 a").click(function(){ $("#main04 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi05 a").click(function(){ $("#main05 img").attr("src",$(this).attr("href")); return false; }); });
- ベストアンサー
- AJAX
- jQueryのアニメーションについて
jQueryのアニメーションについて聞きたいです。 チェックボックスと連動してボックスが表示されるアニメーションはわかりましたが、表示される際のアニメーションはどうすればいいかわかりません。 フロートで横並びになった一番・二番・三番の三つのボックスがあり、三番のみが表示されている場合、三番のボックスが一番左に表示されています。 そこで二番のチェックボックスにチェックをして、二番のボックスを表示ると、二番が左で三番がその右に表示されます。 その際、三番が右にずれるときにアニメーションでスライドできないでしょうか。 現在のソースです。 【CSS/Script】 <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> <style type='text/css'> input{margin:80px 0 0 80px;} div{ display:none; margin:25px; padding:25px; background:#eee; width:200px; height:150px; float:left; } </style> <script type='text/javascript'> $(window).load(function(){ $('#check1').click(function() { $("#box1").slideToggle(this.checked); }); $('#check2').click(function() { $("#box2").slideToggle(this.checked); }); $('#check3').click(function() { $("#box3").slideToggle(this.checked); }); }); </script> 【HTML】 <p> <label><input type="checkbox" id="check1">一番</label> <label><input type="checkbox" id="check2">二番</label> <label><input type="checkbox" id="check3">三番</label> </p> <div id="box1">一番を押してでるのです</div> <div id="box2">さては二番を押したから</div> <div id="box3">どれかと思えば三番でした</div> よろしくお願いいたします。
- ベストアンサー
- JavaScript
