jQueryギャラリーのボタン動作にお悩みの方へ
- jQueryで作成したギャラリーボタンの動作にお悩みの場合、'one'clickで一度だけ実行する処理を使用しているため、再度ボタンを押しても動作しないことがあります。
- また、プロフィールボタンを押した際には写真を引っ込めてプロフィールを表示することはできますが、再度ギャラリーボタンを押すと動作しないため、'one'を解除する方法が必要です。
- 調査の結果、'unbind'関数を使用して'one'の解除が可能です。また、他の方法としても、'bind'関数を使用することで動作を制御することができます。
- ベストアンサー
jQueryについて質問なのですが、ずっと調べているのですが答えが見つ
jQueryについて質問なのですが、ずっと調べているのですが答えが見つからずどうかお力を貸してください！ 今ホームページを作っていまして、メニュー画面でギャラリーのボタンをクリックすると"animate"を使って横からスーッと写真が出てくるように作りました。しかしもう一度ギャラリーボタンを押すと更に横に動いてしまうため、"one"clickで一度だけ実行する処理にしました（これしかやり方が分からなかったので。。） とりあえずここまではいいのですが、この時に例えばプロフィールボタンを押したときに今出ている写真を引っ込めてプロフィールを出すことは出来るのですが、またギャラリーボタンを押したときに"one"にしているため動きません。 そこでお聞きしたいのですが、この"one"を解除する方法などはあるのでしょうか？ もしくは他に何か良い方法あれば是非教えてもらいたいです。 色々調べて"bind"、"unbind"をうまく使うのかなと思って試行錯誤やってはいるのですがなかなかうまくいかず。。。 どうしても来週までに仕上げなくてはならなくて是非お力を貸してください！！
- nekoze-man
- お礼率76% (26/34)
- その他(ソフトウェア)
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
自分でフラグとか設けて制御すればいいんじゃないかな。 以下のサンプルでは右に出しているliには'flag'が立っている。 （上位ULには現在出しているliのjQueryオブジェクトを'current'に記憶している） <head> <style type="text/css"> ul,li{ list-style-type:none; margin:0; padding:0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#Menu li').click(function(){ if($(this).data('flag')) return; $(this).animate({marginLeft:'100px'},'slow'); $(this).data('flag',true); if($(this).parent().data('current')) { $(this).parent().data('current').animate({marginLeft:'0px'},'fast').data('flag',false); } $(this).parent().data('current',$(this)); }); }); </script> </head> <body> <ul id="Menu"> <li>AAAA</li> <li>BBB</li> <li>CCCCC</li> </ul> </body>
関連するQ&A
- jQueryについて質問なのですが、ずっと調べているのですが答えが見つ
jQueryについて質問なのですが、ずっと調べているのですが答えが見つからずどうかお力を貸してください！ 今ホームページを作っていまして、メニュー画面でギャラリーのボタンをクリックすると"animate"を使って横からスーッと写真が出てくるように作りました。しかしもう一度ギャラリーボタンを押すと更に横に動いてしまうため、"one"clickで一度だけ実行する処理にしました（これしかやり方が分からなかったので。。） とりあえずここまではいいのですが、この時に例えばプロフィールボタンを押したときに今出ている写真を引っ込めてプロフィールを出すことは出来るのですが、またギャラリーボタンを押したときに"one"にしているため動きません。 そこでお聞きしたいのですが、この"one"を解除する方法などはあるのでしょうか？ もしくは他に何か良い方法あれば是非教えてもらいたいです。 色々調べて"bind"、"unbind"をうまく使うのかなと思って試行錯誤やってはいるのですがなかなかうまくいかず。。。 どうしても来週までに仕上げなくてはならなくて是非お力を貸してください！！ ※先日同じ質問をしましてご回答を頂いて、まだ解決していないのに間違ってすぐに終了させてしまったので引き続き質問させていただきます。
- ベストアンサー
- その他(ソフトウェア)
- Dreamweaver CS5.5のJQuery
PC用のホームページを作りたいのですが、iPadでも見れるようにしたいです。 トップページやギャラリーページはjQueryで写真を動かしたいのですが、 Dreamweaver CS5.5にはjQueryが使える仕様になっていると聞きました。 Adobeのホームページを見てみても詳しく書いていません。 iPhone用の小さいサイズのものではなく、PC用の大きいサイズでもjQueryで簡単に作れるのでしょうか？ jQueryをやったことがないのですが、このソフトで簡単にFlashのように写真を動かしたり、 サムネイルをクリックすると、写真が大きく表示されるようなギャラリーページが作れるのでしょうか？ どなたか、Dreamweaver CS5.5 について教えてください。 よろしくお願いします。
- ベストアンサー
- CSS
- jquery bindがとまらない
jquery の bindを使い、以下のサイトを参考にしながら、実装を試みているのですが、unbindしてもとまらなくなってしまいました。 mousedown、mousemove、mouseup を使い、mousedownした時点のx座標と、mousemoveしている間のx座標の差を取り、mouseup時に移動距離を表示するというものをとりあえず作りたいのですが、mousemoveが永遠続いてしまい、mouseupしてもとまりません。 $('#main_body').mousedown(function(e){ now_x = e.pageX; alert(now_x); $(document).mousemove(function(e){ now_x2 = e.pageX; alert(now_x2); }) }).mouseup(function(){ alert("bbbb"); $(document).unbind("mousemove"); }); これですと、now_x2がずっと出続けてしまいます。。。 どうか、お力をお貸しください。 よろしくお願い致します。 参考サイト： http://weble.org/2011/03/08/jquery-floatingbox
- ベストアンサー
- JavaScript
- jQuery - bind('click', x)
<!DOCTYPE html> <script src="jquery-1.7.1.js"></script> <style> .menu_items { display: none; } </style> <script> $(function() { $('.dropdown').each(function () { var menu = $(this).parent().children('.menu_items'); var hideFunc = function() { menu.slideUp(120); $(document).unbind('click', hideFunc); }; $(this).click(function() { menu.slideDown(120); $(document).bind('click', hideFunc); }); }); }); </script> <div> <button class="dropdown">Currency</button> <ul class="menu_items"> <li><button>USD</button> <li><button>EUR</button> <li><button>GBP</button> </ul> </div> -- jquery でメニューに表示・非表示をしたいと思ってます。 click したあとに、メニューを消す命令を bind してるってのに、 この hideFunc （メニューを消す命令） がすぐ呼ばれてしまいます。 適当な配列をフラグに使って二回目呼ばれたときには消す、みたいな解決策を思い来ましたが、 いまいちスマートな感じがしません。 ちゃんとクリックが終わったあとに hideFunc をバインドしたいのですが、それはなにかいい書き方あれば教えてください
- 締切済み
- JavaScript
- 【jQuery】for文ではイベント登録できない？
複数のボタンがあり、それぞれがクリックされると、 対応したdiv要素がanimateを行う、というギミックを作成しております。 配列に複数のボタンのid名と、各div要素のid名を格納しておき、 for文でclickイベントを登録しようとしましたが、うまく動作しませんでした。 【例1】 jQuery(function($){ var buttonArray = ["#button0", "#button1", "#button2"]; var divArray = ["#box0", "#box1", "#box2"]; for(i=0; i<buttonArray.length; i++){ $(buttonArray[i]).click(function(){ $(divArray[i]).animate({width: "0px"}, "slow", "swing"); }); } }); --------------------------------------------------- 以下のように書くと、正常に動作しました。 【例2】 jQuery(function($){ var buttonArray = ["#button0", "#button1", "#button2"]; var divArray = ["#box0", "#box1", "#box2"]; $(buttonArray[0]).click(function(){ $(divArray[0]).animate({width: "0px"}, "slow", "swing"); }); $(buttonArray[1]).click(function(){ $(divArray[1]).animate({width: "0px"}, "slow", "swing"); }); $(buttonArray[2]).click(function(){ $(divArray[2]).animate({width: "0px"}, "slow", "swing"); }); }); --------------------------------------------------- そこで質問なのですが、 ・for文ではイベントの登録は行えないのか？ ・今回のようなケースの場合、どのように書くのが適切か？ 上記2点に関して、ご回答、ご意見を頂けますと幸いです。 どうぞよろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- jQuery クリックした後の動き
ボタン(#btn)をクリックすると、#navWarpを右に200px 移動するところまでは出来ましたが、２度目のクリックで元の位置まで 戻すにはどのような方法があるのでしょうか。 宜しくお願いします。 ■jquery $(function(){ $("#btn").click(function(){ $("#navWarp").stop().animate({"left":"200px"},500); }); }); ■css #navWarp{ position:relative; margin:0 0 0 -200px; } #btn{ position:absolute; top:0; left:200px; cursor: pointer; } ■html <div id="navWarp"> <div id="btn"></div> </div>
- ベストアンサー
- JavaScript
- jquery(galleryview)の改修したいのですが。。
写真＋コメントを自動にスライドして表示出来るギャラリーを作成するために、jqueryのライブラリ（garreyview.js）を改修してみたのですが、 上手くカスタマイズが出来ません。(>_<;) 且つ、左右の矢印ボタンを押すとひとつずつ移動していくものを作りたいのですが・・・具体的にどう改変すればよいのかまったく検討がつきません。 参考サイト、もしくは違うライブラリでもよいのですが、 なるべくイメージに沿う形のものを教えていただけませんでしょうか？？
- ベストアンサー
- JavaScript
- 「jQuery」Lightboxのアニメーションを無くしたい
フォトギャラリーのホームページを作っています。 サムネイルをクリックしたら、ページ上で写真が拡大表示され、 拡大写真の以外の部分がグレーになるような演出をしたく思っています。 つまりjQueryのLightboxのようにしたいのですが、 Lightboxの「写真を表示するごとに、画像幅に合わせて枠が広がり、 最後にクローズボタン部分が表示される」というアニメーションを無くしたいと思っています。 （シンプルに拡大画像がでてくるのみ、にしたい） このようなことは設定で可能でしょうか？ ちなみに「Lightbox」では無く、「ThickBox」というものを使ってみたのですが、 これが理想の動きではあるものの、IE６ですと画像を開いたときに背景のページが 少しずれる、という不具合があります。 Lightboxの設定や他のライブラリ等ご存知でしたら教えていただけないでしょうか？ 知識不足のため、説明が拙くすみません。。。 どうぞ宜しくお願いもうしあげます。
- ベストアンサー
- JavaScript
- jQueryにて、.toggle()でアニメート
.toggle( function(){ } , function(){ } ); こういう形で無名関数の中には.animateを入れてアニメーションを交互するようにしています。 (もうすぐこの形が使えなくなるそうですが…) やりたいことはもう少し複雑で、まず.toggleするボタンを2つ以上にしたいと思っています。 それぞれのボタンは元々、 ボタン1：設定した"hoge1"を押すとあるテキストエリアが存在するボックスが大きくなったり小さくなったりする。hoge1ボタンもそれに合わせてwidthが大きくなったり小さくなったりする。 ボタン2："hoge2"を押すとテキストエリアに対して.val("特定のテキスト").focus();するようにして"特定のテキスト"を追加してその後フォーカスするようなボタン。 これらは別々にちゃんと動いていまして、そこまでは出来てるんですが ボタン2の"hoge2"に、押したら 『ボックスが開いた上でテキスト追加のフォーカス』 という動作を追加したいと思い $(".hoge1, .hoge2").toggle(function(){ $(".textareabox").animate({width:"300px", height:"toggle", opacity:"toggle"}); $(".hoge1").animate({width:"300px"}); },function(){ $(".hoge1").animate({width:"150px"}); $(".textareabox").animate({width:"150px", height:"toggle", opacity:"toggle"}); }); こういう風にボタンを2つともセレクトすると、どちらか一方のみを使うのであれば動くんですが 当たり前のことに"hoge1"を一度だけ押してから"hoge2"を押すと .hoge1のwidthは戻らずに、.textareaboxのみ引っ込んで(toggleして)、そこからずれていきます。 ややこしいのですが、場合分けすると (".hoge1")をクリックしたら 未アニメート時：出す 既アニメート時：ひっこめる ("hoge2")をクリックしたら 未アニメート時：出して.val().focus() 既アニメート時：出したままで.val().focus() こういうことにしたいです。.val.focusは別でscript書いてます。 :not(:animated)とかいうのをググって見つけたんですがいまいちわかりません。 初心者なので前提からしてどこか間違ってるかもしれませんが どなたかお知恵拝借願います。。。
- ベストアンサー
- JavaScript
- jquery の clickイベント
いつもお世話になっております。 当方jQueryは初めてで試行錯誤しながら使っています。 標題について質問です。 <form> <input type="text" id="code[1]" value="00001"> <input type="submit" id="add[1]"> <input type="submit" id="del[1]"> </form> 上記のフォーム文で、 jQuery.noConflict(); jQuery(document).ready(function($){ $("input").click(function(){ var e = $(this).attr("id"); }); }); とし、上のform文を直接書いた場合は押されたボタンが認識されるのですが、 form文をajax通信でinnerHTMLで出力されたボタンを押した時は ボタンを押してもイベントを認識してくれません。 これはinnerHTMLで出力しているからなんでしょうか。 何度やっても分からず質問させて頂きました。 以上、宜しくお願い致します。
- ベストアンサー
- JavaScript
お礼
すみません！ まだ解決していないのに終了させてしまいました！ また引き続き投稿させてもらいましたのでよろしければお願いします！！ http://oshiete.goo.ne.jp/qa/6063457.html
補足
ご質問に答えてくださってありがとうございます！！ とりあえずギャラリーボタンを押した後の、更にまた押したときに動かないようになったのですが、その後の他のメニューボタンを押したときの解除がうまくいきません。 いまずっと色々とやっていたのですがなかなかうまくいかず。。 僕の場合liそれぞれにclassを振り分けているのですがそういう場合はどうすればよろしいのでしょうか？ このような感じで振り分けています。 <ul> <li class="homebtn"><a href="#">home</a></li> <li class="probtn"><a href="#">profile</a></li> <li class="gallbtn"><a href="#">gallery</a></li> <li class="blogbtn"><a href="#">blog</a></li> </ul> そしてsteel_gray様に教わったのをこのような感じでやってみたのですが。。 //ギャラリーBOX $(function(){ $("#main_manu li.gallbtn").click(function(){ if($(this).data('flag')) return; $("#gallery_manu_box li.ind_pho").show(0).animate({left: "+=820px"},1000); $("#gallery_manu_box li.ita_pho").show(0).animate({left: "+=1080px"},1200); $(this).data('flag',true); if($(this).parent().data('current')) { $("#gallery_manu_box li.ind_pho").hide(0).animate({left: "-=820px"},1000); $("#gallery_manu_box li.ita_pho").hide(0).animate({left: "-=1080px"},1200); $(this).data('flag',false); } $(this).parent().data('current',$(this)); }); }); これではダメだろうなというはなんとなく見て理解できるのですが、全くほかのやり方が思いつきません。。。 それと、steel_gray様の書かれたサンプルの"this"と言うのは、"#Menu li"のことを指しているのでしょうか？ すみません質問ばかりで。。 やはりjavascriptをちゃんと勉強しなくてはダメですね。。 お時間あればお返事よろしくおねがいします！！