0

JQueryの表示と非表示に問題があります。要素にカーソルを合わせると、別の要素が右側に飛び出すのを表示したいと思います。私は次のコードでそれを管理しました：

var actionHoverInListener = function () {
    $(this).children('.pop-out').show("slide", { direction:"left" }, 100);
};
var actionHoverOutListener = function () {
    $(this).children('.pop-out').hide("slide", { direction:"left" }, 100);
};

// Add a hover listener for actions
$(".magic").hover(
    actionHoverInListener, actionHoverOutListener
);

これは問題なく動作しますが、問題は速度です。「魔法の」divにすばやくカーソルを合わせたり外したりすると、ポップアウトが非表示になることはありません。ショーがまだスライドをアニメーション化しているため、hide呼び出しが無視されているかのようです。

ホバーアウトメソッドが正しく呼び出されています。呼び出されていることを確認するために、ログコードを挿入しました。したがって、問題は、非表示がショーをキャンセルしないことです。これを行う方法はありますか？

ありがとう！

アップデート：

私はjfiddleに私の問題の例を含めました：http：//jsfiddle.net/Pekf2/

赤いストライプの下でマウスを動かします。緑色のスライドが表示されますが、速すぎる場合はスライドして戻りません（stop（）呼び出しを使用した場合でも）。

4

2 に答える 2

2

への変更

$(this).children('.pop-out').stop().hide(...

これにより、ショーのアニメーションが停止し、すぐに非表示になります。

編集：理由は正確にはわかりませんが、そのように.stopはうまくいきません.children。異なるセレクター構文を使用すると、何らかの理由で機能するようです。

また、アニメーションが停止しているため、leftCSS が負になる可能性があるため、.hide完了したら 0 に設定するコールバックを追加しました。

http://jsfiddle.net/Pekf2/4/

于 2012-11-26T22:54:21.210 に答える
0

jQuery hoverintent プラグインの使用を検討できます。これは、以前にこのような問題を解決しました。

あなたのフィドルをいじって hoverIntent を実装すると、私はこれに行き着きました: http://jsfiddle.net/crowjonah/Pekf2/1/

私がそう言うなら、かなりうまくいきます。次のように、プラグインに対応するようにスクリプトを変更しました。

var config = {    
 over: actionHoverInListener, // function = onMouseOver callback (REQUIRED)    
 timeout: 1000, // number = milliseconds delay before onMouseOut    
 out: actionHoverOutListener // function = onMouseOut callback (REQUIRED)

};

// Add a hover listener for actions
   $('.monkey').hoverIntent(
       config
);
于 2012-11-26T22:55:21.863 に答える