I am trying to make a simple setTimeout, to make a div tag invisible after 2 seconds.
The setTimeout function makes the div invisible but irregularly, sometimes immediately and sometimes after 1 sec, and so on.
Here is my code:
function beginTimeOut(){
t = setTimeout(function(){hideSubMenu()},2000);
}
function hideSubMenu(){
var elem;
elem = document.getElementById("ul_navlist1");
elem.style.visibility="hidden";
clearTimeout(t);
}
By the way, t is a global variable. I have tried this too: t = setTimeout("hideSubMenu()",2000); but with the same irregular results.
UPDATE from the OP:
This is the div that contains my menu and submenu. I edited it to be a little bit readable here.
The right_rect is the div that contains the menu and submenu. In this div I call onmouseout to hide the submenu.
<div class="right_rect" onmouseout="beginTimeOut();">
<div class="menu2" >
<ul >
<li onclick="hideOrShow();"><a href="#">item1</a></li>
</ul>
</div>
<div id="ul_navlist1">
<ul >
<li><a href="#">sub_item1</a></li>
</ul>
</div>
</div>
and this is the part of the javascript that I use to perform the hiding and showing process.
function hideOrShow(){
var hOrV;
var elem;
var styleType = "visibility";
elem = document.getElementById("ul_navlist1");
hOrV = getStyle(elem, styleType);
if(hOrV =="hidden"){
//alert();
elem.style.visibility="visible";
}else{
elem.style.visibility="hidden";
}
}
function beginTimeOut(){
setTimeout(function(){document.getElementById("ul_navlist1").style.visibility="hidden";}, 2000);
}
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
The getStyle function is not my code.