Question

我正在尝试完成一些用户将鼠标悬停在某个项目上并且jquery接管并显示该项目（但仅在几秒钟后）。我列出了以下HTML：

<ul id="ulPersonal">
      <li class="break eTime">
        <p>Manage your time card.</p>
        <div id="dEtime">
          some content
        </div>
       </li>
</ul>

li项目是可见的，一旦你mouseenter进入它，我就会显示div dEtime，如下所示（这里是jquery）：

        $('#dEtime').hide();
        $(".eTime").mouseenter(function () {
            $('#dEtime').fadeIn('slow');
        });

这很好用..当用户将鼠标悬停在li项目上时，div会淡入。但是，我希望在此之前等待大约2-3秒。含义允许用户将鼠标悬停在li上，它应该等待，然后只有当它们仍然悬停超过2秒时才会打开。如果他们在那2秒之前“不悬停”，那么div就永远不会出现。

我希望这是有道理的。基本上允许悬停但只在2秒后显示div。否则不要显示它。我有很多div需要做到这一点，但希望现在保持简单。

Answer 1

使用.delay()

$('#dEtime').delay(2000).fadeIn('slow');

即使淡出也添加了一个mouseleave：

$(".eTime").mouseleave(function(){
    $('#dEtime').stop(true,true).fadeOut('slow')
});

这是一个小提琴：http://jsfiddle.net/r3XJE/2/

更好的方法是使用.hover()来获得更短的代码：

$('#dEtime').hide();
$(".eTime").hover(function () {
    $('#dEtime').delay(2000).fadeIn('slow');
},
function(){
    $('#dEtime').stop(true,true).fadeOut('slow')
});

小提琴：http://jsfiddle.net/r3XJE/1/

Answer 2

尝试使用hover + setTimeout

var id;
$('#dEtime').hide();
$(".eTime").hover(
    function () {
        id = setTimeout(function(){
            $('#dEtime').fadeIn('slow');
        }, 2000)
    },
    function() {
        if (id != null) {
            clearInterval(id);
        }        
        $('#dEtime').fadeOut('slow');
    }
);

DEMO

Answer 3

尝试使用此

$('#dEtime').hide();
$(".eTime").mouseenter(function () {
$('#dEtime').delay(3000).fadeIn('slow');
});
$(".eTime").mouseleave(function () {
$('#dEtime').fadeOut('slow');
});

Answer 4

我最后使用setTimeout作为'Sushanth - '的吸收，当我在回来的时候做了类似的litle。诀窍是保存返回的id，然后在mouseleave上对此id运行clearTimeout。

我还发现，如果我在中途停止它们，FadeIn / FadeOut会感到困惑，只停留几个百分点的不透明度而不是一直淡入或淡出...我切换到FadeTo让我设置目标不透明度 - 0或1 ......

mouseenter等一下然后显示div项（以秒为单位？）

4 个答案: