附加延遲OnMouseLeave在一定DIV行動 - 的JavaScript，HTML，jQuery的

Question

<div class="container4" style="position: relative; left: 0px; top: 0px; width: 80px; height: 90px; border: solid 1px black;" onmouseenter="this.style.border='solid 3px red';" onmouseleave="this.style.border='solid 1px black';" onclick="this.style.background='rgba(0, 0, 0, 0.5)';" oncontextmenu="return false;"></div> 

http://jsfiddle.net/X4NXf/1/

我需要OnMouseLeave在行動對某一類的div簡單的延遲。

如果可能，行動遲緩，如果你進入的div再次推遲行動之前被觸發應該被取消，然後重新啓動（與延遲從頭開始）再次離開後的div。

首選的解決方案將是jQuery的功能，但我打開任何其他的辦法。

Answer 1

嘗試jQuery的

$('.container4').mouseenter(function(){ 
    var $this = $(this); 
    clearTimeout($this.data('timerMouseleave')); 
    $this.css('border', 'solid 3px red') 
}).mouseleave(function(){ 
    var $this = $(this); 
    var timer = setTimeout($.proxy(function(){ 
     $this.css('border', 'solid 1px black') 
    }, this), 2000) 
    $this.data('timerMouseleave', timer) 
}) 

演示：Fiddle