- ベストアンサー
:not(:animate)の不具合
- 対象要素が小さい場合に、マウスアウトを認識せずに、ホバーの状態でアニメーションが止まってしまう不具合が発生しています。
- mouseoutやmouseleaveを使用しても症状は同じであり、対応策が必要です。
- マウスが要素にホバーしている時間に応じてプログラムの実行を制御する方法も検討したいと思っています。
- salt_on_all
- お礼率56% (9/16)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- jQueryの :not() .not() が有効になってくれない
jQueryの :not() .not() が有効になってくれない 一部のクラスを除いて処理をしようと思っています。 notを使いたいのですが、思うように動作してくれません。 スクリプトの問題なのか、HTMLの問題なのか…。 原因究明にご協力お願いします。 http://www.wp-start.com/jquery_test/test2.html 詳しくはソースを見て頂きたいのですが… http://www.wp-start.com/jquery_test/function.js マウスホバーとマウスクリックで クラス _e,_h でアクションを起こします。 でも、クラス _bigbox に入っている _e,_h は無反応にしたいのです。 このソースは問題部分だけを抽出しています。 notの逆に個別に指定するのは極めて煩雑になってしまいます。 できればjQueryのnotで解決したいと考えています。 よろしくお願いします。 以下、ソースの一部です。 -------------------------------------------------- //_hクラス $("div:not(._bigbox) ._h").hover( function () {$(this).css("border","2px solid red") }, function () {$(this).css("border","none") } ); //_hクラス $("div").not("._bigbox").find("._h").click(function () { alert("click _h"); });
- ベストアンサー
- JavaScript
- jQueryのforループ時のanimate
jQueryにて下記のように 配列にて登録した要素に対して forループにてanimateを実行し、 completeで、animate完了後の動作を実行したいのですが、 forループにて複数に対して処理を行った際の挙動がおかしく、 動作を実行する前にcompleteの処理が走ってしまいます。 どのようにすれば、forループで複数のanimate処理をおこなっても 動くことができるようになるのか、 教えて頂けますよう宜しくお願いいたします。 -------------------------------------------------------------------- $(document).ready(function () { for(i=0; i<10; i++){ pArray($('p').eq(i)); }; for(i=0; i<10; i++){ pArray[i].stop().animate({left: -100 * i}, {duration:1500, easing:'swing',complete:aaa()}); } function aaa(){ alert('完了') } }
- 締切済み
- JavaScript
- adobe edge animateのアクション
adobe edge animateであるエレメントのアクションを開くでmouseoverを選択して開いて // マウスがオブジェクトに重なったときに実行されるコードを挿入します var a=0; if(a=0){ sym.play("k_click"); a=1; } といったコードを記入したのですが、エレメントをマウスオーバーした時一度のみsym.play("k_click");を実行するという事をしたいのですが、うまくいきません。 どのようにしたらよいでしょうか？
- 締切済み
- ホームページ作成ソフト
- jQuery hover時に遅延させる方法
よろしくお願い致します。 jQueryを使用して以下のようなコードを書いております。 $('#hoge').hover( function(){ $(this).animate({'marginTop':'100px'},500,'easeOutQuart'); }, function(){ $(this).animate({'marginTop':'0px'},500,'easeOutQuart'); } ); 上記のコードで問題なく動作するのですが、要素（#hoge）からマウスを離したときにだけ遅延処理をさせたいと思い、以下のようなコードを書いてみたのですが動作しません。 $('#hoge').hover( function(){ $(this).animate({'marginTop':'100px'},500,'easeOutQuart'); }, function(){ setTimeout(function(){ $(this).animate({'marginTop':'0px'},500,'easeOutQuart'); },1000); } ); この場合、どのようなコードを記述すれば良いのでしょうか？
- ベストアンサー
- JavaScript
- jquery not()がきかない
jqueryについて１点だけ教えて頂きたいことがございます。 今、下記のjqueryにてロールオーバー時のイベントを実行しています。 $('a:not(.current) img').each(function() { var target = $('a:not(.current) img') target.hover(function(){ $(this).stop().fadeTo(500,0.6); }, function() { $(this).stop().fadeTo(500, 1); }); }); それともう一つjqueryである一部分だけ違うロールオーバーにしたく、 全体にかかる上記のjqueryで、#photogalleryというID以外の(a:not(.current) img)にしたいのですが、 ('a:not(.current) img')を $('div').not('#photogallery').find('a:not(.current) img') このようにしてみたのですが、#photogalleryまで実行されてしまいます。 調べて見たのですがわからず、教えて頂ければ幸いです。 どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQueryでポップアップの中にポップアップ
<html> <head></head> <style type="text/css"> .popup { position:absolute;bottom:0;left:0;width:300px;padding:1px 5px;border:solid 1px #000;background:#fff;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.b').live({ /* <= bind? */ mouseenter:function(){ var target = $( $(this).children().filter('.c').attr('href') ); $(this).css('position','relative'); $(this).append('<div class="popup">'+target.html()+'</div>'); }, mouseleave:function(){ $(this).css('position','static'); $(this).children().filter('div').remove(); } }); }); </script> <body> <div id="a1"><p>a1a1a1</p></div> <div id="a2"><p>a2a2<span class="b"><a href="#a1" class="c">#a1</a></span>a2</p></div> <div id="a3"><p>a3<span class="b"><a href="#a2" class="c">#a2</a></span>a3a3</p></div> </body> </html> このような感じで、#a2にマウスカーソルを合わせたらid="a2"の内容が吹き出しのような感じでポップアップし、 その中に含まれる#a1にマウスカーソルを合わせたらそこからさらにid="a1の内容がポップアップする仕組みを作りたいのですが、 ポップアップの上にマウスカーソルを合わせることができずに困っています。 参考：jQuery の hover() について調べたことのまとめ http://d.hatena.ne.jp/tilfin/20080615/1213608859 参考：.live()でhoverイベントに複数の関数をバインドできない http://jsdo.it/cancer6/mh9t 自分で調べてみて分かったことは ・hover(fn1,fn2)はfn1=mouseover,fn2=mouseoutではなくfn1=mouseenter,fn2=mouseleave ・後から追加した要素(ポップアップ)の中の要素にもhoverを有効にするにliveでhoverを設定する必要がある ・liveでhoverイベントを指定するときはmouseenter,mouseleaveの2つに分けて指定する必要がある 上記のコードを保存して見ていただけると分かると思うのですが、 liveにするとポップアップの上にカーソルを合わせることができず、 bindにするとポップアップの上にカーソルを合わせることができます。 ポップアップはclass="b"の子要素となるようにしているので、 ポップアップにマウスカーソルが合わさっている状態＝class="b"からmouseleaveしてない状態となっていると思うのですが…。 どのようにすれば「後から追加された要素(ポップアップ)」内にもhoverイベントを適用させつつ、 「後から追加された要素(ポップアップ)」内にマウスカーソルを乗せられる状態にできますか？ よろしくお願い致します。
- ベストアンサー
- JavaScript
- jQuery｜:not(:animated)
こんにちは、 jQueryにおいて、要素に対して.hoverをかけ、:not(:animated)の指定をした場合、対象要素上で素早くマウスを滑らせると、アニメーションが終了する前にmouseleaveしてしまい、mouseenterの状態でアニメーションが止まってしまいます。(下記URL参照) http://ref.andwax.com/Untitled-1.html このように棚に並べたパンすべてに同様の処理を行う予定なのですが、前述の不具合が解消できなければアイディアそのものを変更を迫られることになると思われます。何か対処方法をご存じでしたら、お伺いできませんでしょうか。全く違う方法で同様の処理を行うアイディアをご存じでしたら、そちらもお聞かせいただけるとありがたいです。 また、area要素にはcursorプロパティが効かないようなのですが、カーソルを出現させるためのアイディアがありましたら、伺わせてください。
- ベストアンサー
- JavaScript
- jqueryの$()について
貴重な場を借りて質問させていただきます。下記のコードはページ内リンクをさせるコードなのですが、※他のサイトからコピペしてます。 2点ほどお聞きしたいことがあります。 一点目はfunction()の()内に＄をいれているのはなぜでしょうか。私が書く際にはつけたことがなくて気になりました。 二点目は、targetという変数を作りったのにも関わらず、それをまた$()内 にいれ、$(target)としている理由がわからず、おしえていただけませんでしょうか。 jQuery(document).ready(function($) { $('a[href^=#]').click(function() { if ($(this).hasClass('scroller')) { var target = $(this).attr('href'); if (target != '#') { target = $(target).offset().top; $('html,body').animate({ scrollTop:target },1500,'quart'); } else { $('html,body').animate({ scrollTop:0 },1500,'quart');
- ベストアンサー
- JavaScript
- jQueryのmouseoutについての質問です。
jQueryの質問です。 dtにマウスを合わせた時にddが表示し、dlの領域以外にマウスが外れるとdd が非表示させるような設定をしたいのですがうまくいきません。 子要素のddとかdtとかaに合わさるとすぐに非表示になってしまいます。 dl内は、どこを移動しても非表示にならずdl要素以外の箇所にマウスが合わ さった時に非表示になってほしいのですが どなたかアドバイスいただけないでしょうか？ 自分なりにはこのように記述してみました。 ■jQueryの記述 $(function(){ $("dt").mouseover(function(){ $("dd:not(:animated)").slideDown("slow"); }); $("dl").mouseout(function(){ $("dd:not(:animated)").slideUp("slow"); }); }); ■CSSの記述 <dl> <dt>スライドして表示状態を切り替える</dt> <dd> あああ<a href="#">ああああ</a>あああああああ ああああああああああああああああああああああああああああああああああ あああああああああああああ<a href="#">ああああ</a>あああああ<a href="#">ああ</a>あああああ </dd> </dl> デモURL： http://tegarude.web.fc2.com/faq/test.html
- 締切済み
- インターネットビジネス
- 複数のイベントリスナーを設置するのは正しい？
クリック時、マウスオーバー時、マウスアウト時の処理を作るとき、 イベントリスナーの使い方はこのようなやり方でよいでしょうか。 var d = document.getElement.ById("id"); d.addEventListener('click', function(e){ var tar=e.target; tar.style.backgroundColor ="#000000"; },false); d.addEventListener('mouseover', function(e){ var tar=e.target; tar.style.backgroundColor ="#aaaaaa"; },false); d.addEventListener('mouseout', function(e){ var tar=e.target; tar.style.backgroundColor ="#555555"; },false);
- ベストアンサー
- JavaScript
お礼
お礼が遅くなってしまい、申し訳ありませんでした。 animatedでしたね、ソース自体はanimatedと記述していたものの、質問させていただく際に勘違いしていたようです。お話のように、アニメーションが終わらないうちにmouseleaveしているのが原因だと思われます。こちらのほうは、別件でどうしても解決しなければいけなくなりましたので、改めて質問を投稿させていただきます。もしよろしければそちらも拝見していただければ、と思います。 0.5秒以上・・のほうですが、当方のスキルでは、状態確認のコードがよくわからないので、今回はあきらめ、本当に必要になったその時に覚えようと思います。 ありがとうございました！