0

この質問で説明されているように、完全に機能するセットアップがあります。基本的に、ドロップダウンメニューの上にマウスを移動すると、ドロップダウンメニューが大きくなり、より多くのオプションが表示されます。

ただし、小さな問題があります。マウスを#dropdowndivの外に移動してから再びすばやく戻すと、常にmouseenterイベントmouseleaveが発生し、ちらつきのサイクルが終わりません。どうすれば回避できますか？

これが私の現在のjQueryコードです

$("#dropdown").hover(function() { 
        $(this).stop(true,true).fadeTo('fast',1);
        $("#options").stop(true,true).slideDown();
    }, function() { 
        $(this).stop(true,true).fadeTo('fast',0.1);
        $("#options").stop(true,true).slideUp();
    }
);

そして現在のHTMLコード

<div id="dropdown">
    <div id="optionsPeek">Options</div>
    <div id="options">
        <!-- Links here -->
    </div>
</div>

dropdownデフォルトで表示され（不透明度10％）、optionspeek常に表示されます。その上にカーソルを合わせると、optionsdivが下にスライドし、その中のリンクが表示されます。

4

4 に答える 4

1

このような問題に対処するために私が見つけた最善の方法は、HoverIntentプラグインを使用することです。それはあなたが抱えているちらつきの問題を防ぐために設計されました。

于 2010-05-18T15:47:05.367 に答える
1

delay()フェードアウトにを追加するとどうなりますか？たとえば、1〜2秒です。そうすれば、アニメーションを発生させることなく、マウスを離れてドロップダウンに戻すことができます。

http://api.jquery.com/delay/

于 2010-05-18T15:47:58.677 に答える
1

使用する：

オーバーフロー：非表示;

于 2010-08-03T11:18:21.843 に答える
0

あなたが言ったちらつきは感じられないようですが、それでも-あなたのマークアップが利用できなかったので、私はマークアップを作成しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#dropdown").hover(function() { 
        $(this).stop(true,true).fadeTo('fast',1);
        $("#options").stop(true,true).slideDown();
    }, function() { 
        $(this).stop(true,true).fadeTo('fast',0.1);
        $("#options").stop(true,true).slideUp();
    }
);
});
</script>
</head>
<body>
<div id="dropdown" style="width: 300px; height: 150px; border: 1px solid black;">DROPDOWN</div>
<div id="options" style="width: 300px; height: 150px; border: 1px solid black;">OPTIONS</div>

</body>
</html>
于 2010-05-18T15:52:20.167 に答える