jQuery fadeOut - how to delay and stop it if mouse enters again

[elem]

Hi guys,

I've got a simple jQuery dropdown div, which fades in once you put your mouse over a certain button, and then fades away after the mouse is away. Since I don't like it to disappear instantly, I've put a delay on the fade out effect. It's all good, but my only problem appears when you move your mouse away and then move it back quickly, it would disappear and then appear again, instead of staying on all the time (I thought delay would stop the fade out effect from happening for that 1 sec, but it just ... delays it suprisingly lol).

So my quesiton is - how can I make that div stay for 1 second and not fade out if the mouse is back over it during that 1 second period? Here's my simple code:

$(".basket-preview").hide();
	$("#basket").mouseenter(function() {
		$(".basket-preview").fadeIn(300);	
	});
	$("#basket").mouseleave(function() {
		$(".basket-preview").delay(1000).fadeOut(300);
	});

[Entity_]

Hi!

I think this is what you are looking for. Take out the JQuery hide and change your the basket-preview div to display:none in CSS. This should now work if I understand what it is you want

$("#basket").mouseenter(function() {   
		$(".basket-preview").fadeIn(300);       
});

$("#basket").mouseleave(function() {
    if($(".basket-preview").css('display') !== 'none')
        $(".basket-preview").fadeOut(300);
});

EDIT: Don't waste your time. This doesn't work for what you want. I just read your post properly.

[elem]

Originally Posted by Entity_

Don't waste your time. This doesn't work for what you want. I just read your post properly.

Lol, thanks for being honest though ;]

[elem]

does anyone know how to overcome that problem?