1

イベントで<p class="results">非表示を表示するように jQuery が設定されているリストがあります。<div>.hover()

<p class="results">item1</p>
<p class="results">item2</p>
<p class="results">item3</p>
...
<div id="hidden">My popup here</div>
...
<script>
$(".results").hover(function() {
     $('#hidden').html(function() {
          [...put html here...]
     }).fadeIn(200);
}, function() {
     $("#hidden").hide();
})
</script>

<p>問題は、ユーザーがアイテムからアイテムにすばやくホバリングしてから完全に離れると、200ミリ秒のフェードインがあるため、非表示にする2番目の関数が起動<div>しないことです。そこのどこかにメソッドを含むコードを追加する必要があると.stop()確信していますが、それを実装する方法がわかりません。何か案は？

4

3 に答える 3

1

試す：

<script>
$(".results").hover(function() {
    $('#hidden').stop().html(function() {
         [...put html here...]
    }).fadeIn(200);
}, function() {
    $("#hidden").stop().hide();
}
</script>
于 2012-09-07T07:30:42.500 に答える
1

あなたはほとんどそれを持っていました：

<p class="results">item1</p>
<p class="results">item2</p>
<p class="results">item3</p>
...
<div id="hidden">My popup here</div>
...
$(".results").hover(function() {
     $('#hidden').html(function() {
          [...put html here...]
     }).fadeIn(200);
}, function() {
     $("#hidden").stop().hide(); // <- important bit here
}
于 2012-09-07T07:28:33.763 に答える
0

マウスエンター、マウスリーブはどうですか？

http://jsfiddle.net/Yxv25/

$(".results").on('mouseenter',function() {
 $('#hidden').fadeIn(200);
}).on('mouseout', function() {
 $("#hidden").hide();
})​

編集：

または、タイマーの設定http://jsfiddle.net/Yxv25/1/

どちらが必要かよくわかりませんでした。

于 2012-09-07T07:36:50.850 に答える