3

我有两个相邻的元素$("#video")和$("#progress").

我希望在鼠标进入其中一个元素时$("#time")显示第三个元素，并在鼠标离开元素时再次隐藏。我可以让它工作，但有一个小问题。fadeInfadeOut

每当鼠标进入其中一个元素时，从另一个元素中出来，该$("#time")元素首先被隐藏然后再次显示，而我希望它始终显示。

这个 jsfiddle更清楚地说明了这个问题。

如何解决这个问题？

请注意，这些元素虽然在网页中彼此靠近，但在代码中实际上是相当分离的，因此不可能将它们全部放在一个大 div 中并将鼠标悬停在该 div 上。

4

4 回答 4

4

您可以用另一个 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 回答