jQuery的。對（「的mouseenter」） - 等待2秒，然後做動作

我有一個腳本，顯示隱藏的文字，當你將鼠標懸停在一個div。但我希望它延遲2秒，如果用戶在2秒之前移開鼠標，我不想顯示任何內容。jQuery的。對（「的mouseenter」） - 等待2秒，然後做動作

我該怎麼做？

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; 
}

來源

2012-01-26 supercoolville

http://cherne.net/brian/resources/jquery.hoverIntent.html可能是你在找什麼 – PeeHaa

var timer; 
$("body").on("mouseenter", "div", function(){ 
    timer = setTimeout(function() { 
     $("p").removeClass("hidden"); 
    }, 2000); 
}).on("mouseleave", "div", function(){ 
    clearTimeout(timer); 
    $("p").addClass("hidden"); 
});

有雅去，就這麼簡單。只需設置超時在運行時，將隱藏的元素並取消超時如果用戶mouseleave S中的元素。

來源

2012-01-26 20:51:38 Jasper

+1打我 –

感謝!!!!!!!! !!!!!!!!!!!!!!! – supercoolville

OMG你們是快...好工作...我的期待相同的:) –

使用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"); 
});

來源

2012-01-26 20:52:20

jQuery的。對（「的mouseenter」） - 等待2秒，然後做動作

回答

相關問題