jQuery｜:not(:animated)

質問

こんにちは、
jQueryにおいて、要素に対して.hoverをかけ、:not(:animated)の指定をした場合、対象要素上で素早くマウスを滑らせると、アニメーションが終了する前にmouseleaveしてしまい、mouseenterの状態でアニメーションが止まってしまいます。(下記URL参照)

http://ref.andwax.com/Untitled-1.html

このように棚に並べたパンすべてに同様の処理を行う予定なのですが、前述の不具合が解消できなければアイディアそのものを変更を迫られることになると思われます。何か対処方法をご存じでしたら、お伺いできませんでしょうか。全く違う方法で同様の処理を行うアイディアをご存じでしたら、そちらもお聞かせいただけるとありがたいです。

また、area要素にはcursorプロパティが効かないようなのですが、カーソルを出現させるためのアイディアがありましたら、伺わせてください。

回答No.1

fujillin · ベストアンサー

jqueryは大してわかりませんが…

fadeＩｎ/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自体、初めて一ヶ月なので、今後も質問させていただくことが多いと思いますので、その際はぜひよろしくお願いします。本当にありがとうございました！！