こんにちは、
jQueryにおいて、要素に対して.hoverをかけ、:not(:animated)の指定をした場合、対象要素上で素早くマウスを滑らせると、アニメーションが終了する前にmouseleaveしてしまい、mouseenterの状態でアニメーションが止まってしまいます。(下記URL参照)
http://ref.andwax.com/Untitled-1.html
このように棚に並べたパンすべてに同様の処理を行う予定なのですが、前述の不具合が解消できなければアイディアそのものを変更を迫られることになると思われます。何か対処方法をご存じでしたら、お伺いできませんでしょうか。全く違う方法で同様の処理を行うアイディアをご存じでしたら、そちらもお聞かせいただけるとありがたいです。
また、area要素にはcursorプロパティが効かないようなのですが、カーソルを出現させるためのアイディアがありましたら、伺わせてください。
No.1ベストアンサー
- 回答日時:
jqueryは大してわかりませんが…
fadeIn/Outさせる対象要素は決まっているようなので、必ず操作するのですから :not(:animated)で選択する必要はないように思われます。
でも、アニメーション中にそれに反するアニメーションを指定すると変なことになるので、選択する代わりにアニメーションを停止させればよろしいかと。
http://api.jquery.com/stop/
$(function(){
$("#bread01").hover(function(){
$("#over").stop(true,true).fadeIn("fast");
},function(){
$("#over").stop(true,true).fadeOut("fast");
});
});
ただし、(↑)これだと一旦アニメーション終了の状態に飛んでしまうので、もっと速度が遅かったり、変化の度合いが大きいと不連続な感じになるかも。
(ご提示のサンプルの場合は、速度がfastで変化もそれほどではないので、あまり違和感はないと思いますが)
現在の構成だと、常に一番上にイメージマップが表示されているので、(下にある)#overはhide()する必要がなさそうなので、opacityの操作だけにして連続的に変化するようにもできそうですね。
$(function(){
$("#over").css("opacity",0).show(); //透明にして表示状態にする
$("#bread01").hover(function(){
$("#over").stop().animate({opacity:1}, "fast");
},function(){
$("#over").stop().animate({opacity:0}, "fast");
});
});
>また、area要素にはcursorプロパティが効かないようなのですが
効かないことはないみたい。
手近にあるブラウザで試したところ、fx(3.6)はareaで、opera(10)はmapに設定することで変化します。
ただし、cursol → cursor に。
IE(6)はどうもうまくいかないみたい(ちゃんと調べてませんが…)。いっそのこと、hoverの処理で一緒にやってしまうとか?
前回に続き、ご回答ありがとうございました。頂いたコードを試させていただいたところ、望む通りに機能しました。今まで、.stopは使ったことがなかったのですが、こういう風に使えばいいんですね。すごく感謝です。jQueryというかJavaScript自体、初めて一ヶ月なので、今後も質問させていただくことが多いと思いますので、その際はぜひよろしくお願いします。本当にありがとうございました!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 Windows11タスクバーやエクスプローラー、スタートメニュー 動画全画面時にカーソルが見えない 1 2022/04/08 00:03
- 知的財産権 意匠権と特許で保護できる範囲の違いに関して 2 2022/04/07 19:33
- ガスコンロ・IHクッキングヒーター・給湯器 給湯器の不具合について リンナイ給湯器でお湯が出なくなりました。 ・直前まで正常稼働、突然給湯しなく 6 2022/05/22 18:27
- その他(学校・勉強) この中で間違ってある説明はありますか?詳しい方に教えていただきたいです。 A. 1つのプログラムが複 2 2023/07/14 01:15
- 哲学 説得力を修辞の巧みさまたは論理の強さの2つに分析するにはどうすると良いでしょうか? 0 2022/07/20 05:46
- 事件・犯罪 刑法についてだれか助けてください。 2 2022/06/05 04:08
- その他(データベース) 業務用のデータベースサーバーの選び方について 4 2022/11/22 10:22
- 事件・犯罪 刑法についてです 2 2022/06/04 03:11
- その他(プログラミング・Web制作) pythonでのカーソル移動がずれる 2 2023/07/30 08:51
- 哲学 《言語記号の恣意性》なる仮説を問い直し 《無主体》を説く構造主義を批判します 2 2023/05/10 04:37
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
関数でy=g(x)のgとは何の略です...
-
要素名がスペースを含む場合のj...
-
jQueryの"return false"の役割...
-
idを使わずにonclickで自身の要...
-
C#テキストボックスの文字を配...
-
google apps scriptの終了のさせ方
-
javascriptでのURLの引数
-
jqGridについて
-
任意の座標をクリックさせるには
-
javascriptでiframeのURL変更は?
-
VBAのIE操作でframe構造のサイ...
-
TexでΣの添え字の位置直し
-
GASでundefinedエラーが出ます
-
javascriptエラーの解決策について
-
今年を取得する方法はありますか?
-
DIV内のDIV要素を移動する。
-
順列生成アルゴリズムについて...
-
javascriptで行を抽出したいです。
-
指定要素のクリック位置を取得...
-
JavaScriptのdocument.all("変...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
functionから別のfunctionを実...
-
idを使わずにonclickで自身の要...
-
関数でy=g(x)のgとは何の略です...
-
phpでの文字の点滅表示
-
JAVAスクリプトで指定時間以降...
-
jslintのエラーについて質問
-
ページ内に複数表がある場合のT...
-
XMLHttpRequestでキャッシュを...
-
関数名をテキストから読み込む...
-
jQueryでzipを解凍読み込みする...
-
getElementByIdを使用したグロ...
-
小数点以下を5刻みで表示
-
クリックすると上に開くアコー...
-
jQuery 同じ処理を関数にまとめ...
-
jQueryの :not() .not() が有効...
-
jQueryの"return false"の役割...
-
Javascriptで引数の参照渡しか...
-
javascript(jQuery)でセル内...
-
jqueryの変数を関数の外に出す方法
-
jquery 複数のメソッド
おすすめ情報