3

隣接する 2 つの要素$("#video")とがあり$("#progress")ます。

マウスがこれらの要素のいずれかに入ったときに3番目の要素$("#time")を表示し、マウスが要素を離れたときに再び非表示にしたいと思います。これを機能させることができますが、小さな問題があります。fadeInfadeOut

マウスがいずれかの要素のいずれかに入り、もう一方の要素から出てくると、$("#time")要素は最初に非表示になり、再び表示されますが、常に表示したいと思います。

この jsfiddleは、問題をより明確に示しています。

これはどのように修正できますか？

要素は Web ページ内で互いに近くにありますが、実際にはコード内でかなり分離されているため、それらをすべて 1 つの大きな div にまとめて、その div にホバーを置くことはできません。

4

4 に答える 4

4

これらの 2 つの要素を別の div でラップできます

<div id='wrapper'>
  <div id="video" style="background: green; height: 100px;" class="hover">VIDEO</div>
  <div id="progress" style="background:red" class="hover">bar</div>
</div>
<div id="time" style="display: none">01:35</div>

次に、ホバーをラッピング div にバインドします

$("#wrapper").hover(function () {
  $("#time").fadeIn(300);
}, function () {
  $("#time").fadeOut(300);
});

フィドル

于 2013-01-07T17:39:32.367 に答える
3

私はこれに遅れていることを知っていますが、要素がホバーされているかどうかを確認し、そうでない場合はフェードアウトを実行すると言いたかったのです。フィドルを参照してください。stop()また、ユーザーがすぐに入って出た場合に複数のアニメーションが発生するのを避けるためのメソッドも追加しますdiv。 

$('.hover').hover(function(){
  $('#time').stop(true,true).fadeIn(300);
},function(){
  setTimeout(function(){
    if($('.hover:hover').length == 0){
        $('#time').stop(true,true).fadeOut(300);
    }
  },0);
});
于 2013-01-07T18:27:32.833 に答える
2

ブロック全体に div を配置し、ホバー クラスを追加してみてください

<div class="hover">
    <div id="video" style="background: green; height: 100px;"> VIDEO </div>
    <div id="progress" style="background:red"> bar </div>

    <div id="time" style="display: none"> 01:35 </div>
</div>
于 2013-01-07T17:39:57.270 に答える
0

フェード アウト コードに setTimeout メソッドを使用し、変数を使用して、それを非表示にするかどうかを確認できます。

var ShouldBeShown = false;    
$(".hover").hover(fIN, function(){
  ShouldBeShown = false;
  setTimeout(fOUT, 50);
});
function fIN() {
  ShouldBeShown = true;
  $("#time").fadeIn(300);
}
function fOUT() {
  if(!ShouldBeShown)
    $("#time").fadeOut(300);
}

http://jsfiddle.net/EyFdn/1/

于 2013-01-07T18:01:43.163 に答える