:not(:animate)の不具合

質問

こんにちは、たとえば以下のようなコードにおいて、対象要素が小さい場合、マウスアウトを認識せずに、ホバーの状態でアニメーションが止まってしまいます。mouseout, mouseleaveにしても症状は同じです。何か対応策などはあるのでしょうか？

$("#smallBox").hover(function(){
$("#target:not(:animate)").css("backGround", "red");
},function(){
$("#target:not(:animate)").css("backGround","blue");

また、0.5秒以上マウスが要素にホバーしていたらプログラムを実行、0.5秒以内にマウスがアウトしたらば実行しない・・というようなことはできるのでしょうか。理解せずにコピペ、というようなことはあまりしたくないので、複雑なコードになるようであれば、あきらめるのですが。

よろしくお願いします。

回答No.1

fujillin · ベストアンサー

jqueryはよく知らないので、確認はしていませんが…

$(selector).hover(handlerIn, handlerOut)　は
$(selector).mouseenter(handlerIn).mouseleave(handlerOut); と同じと解説があります。
　http://api.jquery.com/hover/

＞not(:animate)とありますが、アニメーションはさせていないですよね？
（ご提示のコードではしていませんが、小さな要素だとアニメーションが終わらないうちにmouseleaveしてしまうことが想像できるので）

また、「not(:animate)」 は 「not(:animated)」 と思われますが、その違いが悪さをしている可能性はないでしょうか？
　http://api.jquery.com/animated-selector/

＞0.5秒以上マウスが要素にホバーしていたらプログラムを実行、0.5秒以内に
＞マウスがアウトしたらば実行しない・・というようなことはできるのでしょうか

可能だと思います。（ただし、即座に反応せずに0.5秒後から反応する。）
mouseoverですぐに処理を実行せずに、setTimeoutなどで0.5秒後に状態を確認する処理を行えばよろしいかと。
0.5秒たってもとと同じであれば、そこで初めて処理を実行するというふうに考えればよいのでは？

0.5秒の間にマウスが一回出てまた入っているのを識別する必要があるので、event.timeStampを利用するとかeventの発生回数をカウントしておくとかして、0.5秒前のスタンプであることや発生回数が増していないことを確認するといった必要はありそうですが。

お礼

お礼が遅くなってしまい、申し訳ありませんでした。
animatedでしたね、ソース自体はanimatedと記述していたものの、質問させていただく際に勘違いしていたようです。お話のように、アニメーションが終わらないうちにmouseleaveしているのが原因だと思われます。こちらのほうは、別件でどうしても解決しなければいけなくなりましたので、改めて質問を投稿させていただきます。もしよろしければそちらも拝見していただければ、と思います。
0.5秒以上・・のほうですが、当方のスキルでは、状態確認のコードがよくわからないので、今回はあきらめ、本当に必要になったその時に覚えようと思います。
ありがとうございました！