TimeOut functie aan bestaand script toevoegen

[maurizio]

Onderstaand script zorgt er, in combinatie met de css file, voor dat een submenu balk verschijnt bij een mouse over, en dat deze weer verdwijnt bij mouse out.

Nu wil ik dat het submenu bij mouse out niet direct verdwijnt maar even blijft staan. Bijvoorbeeld 1000 msec.

Wie kan het script aanvullen?

groet, Maurice

          <script type="text/javascript">
$(document).ready(function() {

	$("ul#topnav li").hover(function() { //Hover over event on list item
		$(this).css({ 'background-image:url(../images/topnav_active.gif repeat-x'}); //Add background color and image on hovered list item
		$(this).find("span").show(); //Show the subnav
	} , function() { //on hover out...
		$(this).css({ 'background' : 'none'}); //Ditch the background
		$(this).find("span").hide(); //Hide the subnav
	}

}
</script>

 

[That Guy]

Nou, ik kan geen jQuery (of wat je dan ook mag gebruiken) maar je kan zoiets proberen:[JS]$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background-image:url(../images/topnav_active.gif repeat-x'}); //Add background color and image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
setTimeout(function(){
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
}, 1000);
}

}
[/JS]edit: alleen je 'this' werkt dan mischien niet meer, dus dan moet je even een closure geval gebruiken.

 

[Egel]

Nou, ik kan geen jQuery (of wat je dan ook mag gebruiken) ...

Daar sluit ik me bij aan, maar je moet er wel een clearTimeout() bij gebruiken.

Als je op deze manier na de mouseout binnen een seconde weer boven het menu gaat staan dan krijg je:
(straks verbergen), weergeven, verbergen

Schematisch wordt het dan zo:
[js]var timer = 0, menuMemory = ...;

// mouse over
clearTimeout(timer);
menuMemory verbergen;
menu weergeven;

// mouseout
menuMemory = dit menu;
timer = setTimeout(menu verbergen);[/js]