为了防止鼠标快速滑过div而加的时间限制:
在看延迟绑定时候看到,这也算是延迟绑定了?:(20130909)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title></title> </head>
<body> <div id="test" style="border: 1px solid #CCC; width: 100px; height: 100px; background: #666;">这是一个测试DIV
把鼠标放在上面2秒后会弹出他的ID</div>
<script type="text/javascript">
// <![CDATA[
var delay=function(t,fn){
var i=0,
j=10,
t=(t*1000)/j,
//把延迟时间平均分成10等份
_this=this,
//解决this绑定问题,所以调用delay函数的时候,请处理好this指向本身对象
d=setInterval(function(){
i++;
if(i==j){
clearInterval(d);
fn.apply(_this);
};
},t); _this.onmouseout=function(){
clearInterval(d);
}; }
document.getElementById("test").onmouseover=function(){
delay.apply(this,[2,function(){
alert(this.id)
}]);
//使用apply改变this指针
};
// ]]>
</script> </body>
</html>
(感觉在enter中应该要加一个clear,但是测试下来,感觉不加,也不会set更多的time 20130805)
$(".a").each(function(i) {
$(this).mouseenter(function(){
t=setTimeout("$('.div').eq("+i+").fadeIn()",500)
}).mouseleave(function(){
clearTimeout(t)
$(".div").eq(i).fadeOut();
}) });
不知道当时为啥会想得那么复杂 :
$(".list").mouseenter(function() {
if( $(this).data("time") ){
clearInterval( $(this).data("time") );
}
var _this = $(this);
$(this).data("time", setInterval(function(){
_this.children(".cover").animate({top: '0px'});
clearInterval( _this.data("time") );
_this.removeData("time");
},300));
}).mouseleave(function() {
if( $(this).data("time") ){
clearInterval( $(this).data("time") );
$(this).removeData("time");
}
$(this).children(".cover").animate({top: '145px'});
})
--------------------------------------------------------------------------setTimeout加参数20130805
var _sto = setTimeout;
window.setTimeout = function(callback,timeout,param)
{
var args = Array.prototype.slice.call(arguments,2);
var _cb = function()
{
callback.apply(null,args);
}
_sto(_cb,timeout);
}
--------------------------------------------------------------------------setTimeout加参数20130805
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>And the winner isn't...</title>
<style type="text/css">
a{width:100px; height:100px; background:#0FF; display: block; position:absolute}
.div{ width:100px; height:100px; background:#f36; display:none; position:absolute}
.warp{width:100px; height:100px; float:left; position:relative; margin:20px}
</style>
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".warp").each(function(i) {
$(this).mouseenter(function(){
t=setTimeout("$('.div').eq("+i+").fadeIn()",500)
}).mouseleave(function(){
clearTimeout(t)
$(".div").eq(i).fadeOut();
}) });
})
</script>
</head>
<body>
<div class="warp" style=" ">
<a href="#"></a>
<div class="div"></div>
</div>
<div class="warp">
<a href="#"></a>
<div class="div" style=""></div>
</div>
<div class="warp">
<a href="#"></a>
<div class="div" style=""></div>
</div> </body>
</html>