How can i disable/cancel setTimeOut when i mouseover && mouseout in specific areas?
i have a simple horizontal menu with four choices. When i mouseover a div (e.g. div A), its child appears and when i mouseout that specific div, its child disappears.
I have placed a setTimeOut function for mouseover (it is about 300).
In some specific conditions i would like to disable setTimeout
1. when i mouseout div A and i mouseover div B, i would not like to have that delay, and i would like just to show the childDiv of B
2. when i mouseout div B and i mouseover div C, i would not like to have that delay, and i would like just to show the childDiv of C
But how can i achieve that??
It's just that i have a series of events: (a simple algorithm)
If(mouseout(divA) && mouseover(divB))
{
disable setTimeOut;
show(ChildDivB); //with no delay
}
else If(mouseout(divB) && mouseover(divC))
{
disable setTimeOut;
show(ChildDivC); //with no delay
}
}
Generally, when i mouseover && mouseout in "foo" div, (foo 开发者_JAVA百科is the div that contains all divs) the settimeout shall be disabled.
Can this be done in jquery??
My code is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.myDiv {
border:1px solid red;
height:30px;
width:100px;
float:left;
}
.myDivChild {
display:none;
width:300px;
height:300px;
}
</style>
</head>
<body>
<div class="foo" style="background-color:#3300FF;width:900px;height:30px;margin-top:100px;">
<div class="myDiv" style="background-color:red;margin-left:100px">A
<div class="myDivChild" style="background-color:red">
Child Div A
</div>
</div>
<div class="myDiv" style="background-color:yellow">B
<div class="myDivChild" style="background-color:yellow">
Child Div B
</div>
</div>
<div class="myDiv" style="background-color:green">C
<div class="myDivChild" style="background-color:green">
Child Div C
</div>
</div>
<div class="myDiv" style="background-color:#00CCCC">D
<div class="myDivChild" style="background-color:#00CCCC">
Child Div D
</div>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var interval;
$('.foo > div').hover(function(){
var $showDiv = $(this).find('div');
interval = setTimeout(function(){
$showDiv.show();
},300);
},
function(){
clearTimeout(interval);
$(this).find('div').hide();
});
</script>
</body>
</html>
Assign a variable then clear it like this:
var myInterval=setTimeout(...);
To disable:
clearTimeout(myInterval);
Be careful that the variable assigned to the setTimeout has scope where you clear the timeout. Also, each variable holds only one interval. If you overwrite it it will not clear the previous timeout. (unless it's an array or object with multiple keys/properties in which case you cannot clear the whole array/object, you need to loop through them and clear each one at a time.)
You cannot do something like
If(mouseout(divA) && mouseover(divB))
because these are events, not variables. What you need to do is record a state of the application and then react to this state. For example, in the event handler function of mouseOut, set a variable
lastMouseOut = this;
Then, in the event handler function of mouseOver, you can do your comparison:
if ((lastMouseOut==divA) && (this==divB)) {...}
Make sure lastMouseOut is a global variable, not a local one in the handler function.
This is what I worked out as an example:
CSS
#menu li {
cursor: pointer;
}
#menu ul {
display: none;
}
HTML
<ul id="menu">
<li id="one" class="mainMenu">Menu 1
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li id="one"class="mainMenu">Menu 2
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li id="three"class="mainMenu">Menu 3
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
Javascript
$(function(){
$('.mainMenu').hover(
function(){doMenu(this)},
function(){undoMenu(this)}
);
});
function doMenu(el){
switch (el.id) {
case 'one':
case 'two':
$('ul', el).show();
break;
default:
var menuTimeout = setTimeout(function(){$('ul', el).show()}, 300);
$.data($('#menu'), 'menuTimeout', menuTimeout);
}
}
function undoMenu() {
$('#menu ul').hide();
cancelTimeout($.data($('#menu'), 'menuTimeout'));
}
http://jsfiddle.net/XJhLD/
First off, are you sure that you want a dropdown menu at all? Since mouseless devices are very common today, like an iPad, you will at least want a fallback solution. That being said, I can say that I also struggled with this issue (see their main menu) about a year ago.
Do not reinvent the wheel like I did if you don't have to. Have you tried searching for a small JS plugin/library? You may want to use the jQuery hoverIntent plugin for the delay stuff.
加载中,请稍侯......
精彩评论