add delay to onmouseleave action for a certain 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/

I need a simple delay of the onmouseleave action for a certain class of divs.

If possible, that delayed action should be canceled if you enter the div again before delayed action gets triggered, and then started again (with delay starting again from the beginning) after you leave the div again.

Preferred solution would be jquery function, but I am open for any other approach.

Answer 1

Try 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)
})

Demo: Fiddle