0

我正在尝试完成用户将鼠标悬停在某个项目上并且 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');
        });

这很好用..当用户将鼠标悬停在lidiv 淡入的项目上时。但是，我想在这种情况发生之前等待大约 2-3 秒。这意味着允许用户将鼠标悬停在 li 上，它应该等待然后仅当他们仍然悬停超过 2 秒时才打开。如果他们在这 2 秒之前“悬停”，则 div 永远不会出现。

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

4

4 回答 4

1

采用.delay()

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

即使像这样淡出也可以添加鼠标离开：

$(".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/

于 2013-05-08T18:25:09.803 回答
1

试试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');
    }
);

演示

于 2013-05-08T18:29:54.610 回答
0

尝试使用这个

$('#dEtime').hide();
$(".eTime").mouseenter(function () {
$('#dEtime').delay(3000).fadeIn('slow');
});
$(".eTime").mouseleave(function () {
$('#dEtime').fadeOut('slow');
});
于 2013-05-08T18:29:15.627 回答
0

我最终使用了 'Sushanth --' 所建议的 setTimeout，当时我做了一些类似的事情。诀窍是保存返回的 id，然后在 mouseleave 上对这个 id 运行 clearTimeout。

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

于 2013-05-08T18:42:16.390 回答