div+mouseenter+mouseout模拟title如何添加延时？？？

[UEAnswer]

为了防止鼠标快速划过使模拟title的div显示出来，需要对mouseenter增加适当的延时，类似于悬停之上0.5秒后才开始显示title的效果，请教大家如何实现？？

<div  id="test">offset</div>
<div id="title">
Hello World.
</div>

$(function() {
$("#test").bind({"mouseenter": function() {  
    $("#title").stop(true).delay(100).show();
},
"mouseout": function() {    
    $("#title").hide();
}});
});

#title {
    width:100px;
    height:100px;
    display:none;
    position:absolute;
    background-color:red;
}


#test {
    	position:absolute;
    text-align:center;
    left:20%;
     top:20%;
    right:50%;
    bottom:50%;
    background-color:gray;
    border: 1px solid ;
}

[苹果没有皮]

用一个定时器试试吧，类似这样

  var timer = null;
    $("#test").on("mouseenter", function(){
        timer = setTimeout(function(){
            $("#title").fadeIn();
        }, 300);
    });
    $("#test").on("mouseout", function(){
        if(timer){
            clearTimeout(timer);
        }
        $("#title").fadeOut();
    });

[UEAnswer]

引用 1 楼 janey_he 的回复:

用一个定时器试试吧，类似这样

  var timer = null;
    $("#test").on("mouseenter", function(){
        timer = setTimeout(function(){
            $("#title").fadeIn();
        }, 300);
    });
    $("#test").on("mouseout", function(){
        if(timer){
            clearTimeout(timer);
        }
        $("#title").fadeOut();
    });

非常感谢，你的方式可行。 我再等等看是否有通过delay方案能解决的jquery版本。

[一天要饭生活又开始啦]

$("#title").show(100);

[UEAnswer]

一开始title是这样子的 <div id="title"> Hello World. </div> 通过跟踪代码可以发现，当快速划动几次后，html代码变成如下的样子：

<div id="title" style="display: none; height: 1px; margin: 0px; padding: 0px; width: 1px; overflow: hidden; opacity: 0;">
Hello World.
</div>

是什么原因呢？？透明了，长度宽度变成了1，还增加了不少其它属性，为什么，求解答？？

[苹果没有皮]

引用 2 楼 waiting593 的回复:

[quote=引用 1 楼 janey_he 的回复:] 用一个定时器试试吧，类似这样

  var timer = null;
    $("#test").on("mouseenter", function(){
        timer = setTimeout(function(){
            $("#title").fadeIn();
        }, 300);
    });
    $("#test").on("mouseout", function(){
        if(timer){
            clearTimeout(timer);
        }
        $("#title").fadeOut();
    });

非常感谢，你的方式可行。 我再等等看是否有通过delay方案能解决的jquery版本。[/quote] 那你在show方法里带个参数试试： $("#title").stop(true).delay(800).show(1);

[苹果没有皮]

引用 6 楼 waiting593 的回复:

一开始title是这样子的 <div id="title"> Hello World. </div> 通过跟踪代码可以发现，当快速划动几次后，html代码变成如下的样子：

<div id="title" style="display: none; height: 1px; margin: 0px; padding: 0px; width: 1px; overflow: hidden; opacity: 0;">
Hello World.
</div>

是什么原因呢？？透明了，长度宽度变成了1，还增加了不少其它属性，为什么，求解答？？

这个我也不是很清楚原因，可能是动画没有清除干净吧， 不过把stop(true, true)这样子貌似好点

[UEAnswer]

引用 4 楼 janey_he 的回复:

[quote=引用 2 楼 waiting593 的回复:] [quote=引用 1 楼 janey_he 的回复:] 用一个定时器试试吧，类似这样

  var timer = null;
    $("#test").on("mouseenter", function(){
        timer = setTimeout(function(){
            $("#title").fadeIn();
        }, 300);
    });
    $("#test").on("mouseout", function(){
        if(timer){
            clearTimeout(timer);
        }
        $("#title").fadeOut();
    });

非常感谢，你的方式可行。 我再等等看是否有通过delay方案能解决的jquery版本。[/quote] 那你在show方法里带个参数试试： $("#title").stop(true).delay(800).show(1);[/quote] 你好，根据你的建议修改js如下

$(function() {
$("#test").bind({"mouseenter": function() {  
    $("#title").stop(true).delay(50).show(1);
},
"mouseout": function() {    
    $("#title").stop(true).hide();
}});
});

在正常操作时可以，但是如果快速划动几次后就再也不能show了，不知道是什么原因？？ 求解答。

[蹦极的考拉]

stop(false, false)这样定义enter。 stop(true, true)这样定义leave 试试