当你将鼠标悬停在div上时,我有一个显示隐藏文本的脚本.但是我希望它延迟2秒,如果用户在2秒之前将鼠标移开,我想要什么都不显示.
我该怎么做呢？
我有什么: http ://jsfiddle.net/ZhrJT/
-
HTML:
<body>
<div>hover this</div>
<p class="hidden">unhidden!!</p>
</body>
JS:
$("body").on("mouseenter", "div", function(){
$("p").removeClass("hidden");
}).on("mouseleave", "div", function(){
$("p").addClass("hidden");
});
CSS:
div {
background-color:red;
height:100px;
}
p.hidden {
display:none;
}
p {
background-color:yellow;
height:100px;
}
Jas*_*per 36
var timer;
$("body").on("mouseenter", "div", function(){
timer = setTimeout(function () {
$("p").removeClass("hidden");
}, 2000);
}).on("mouseleave", "div", function(){
clearTimeout(timer);
$("p").addClass("hidden");
});
你去,就这么简单.只需设置一个超时,它将在运行时隐藏元素,如果用户mouseleave是元素,则取消超时.
使用setTimeout/ clearTimeout.像这样的东西:
$("body").on("mouseenter", "div", function(){
$(this).data('timeout', setTimeout(function(){
$("p").removeClass("hidden");
}, 2000));
}).on("mouseleave", "div", function(){
clearTimeout($(this).data('timeout'));
$("p").addClass("hidden");
});
| 归档时间： |
|
| 查看次数： |
28920 次 |
| 最近记录： |