admin管理员组文章数量:1279234
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 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"
".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>
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 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/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>
- Is this question solved or not? – Kalle H. Väravas Commented Aug 22, 2011 at 9:41
4 Answers
Reset to default 7Assign 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 parison:
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/XJhLD/
First off, are you sure that you want a dropdown menu at all? Since mouseless devices are very mon 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.
本文标签：
版权声明：本文标题：javascript - How can i disablecancel setTimeOut when i mouseover && mouseout in specific areas? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741260983a2367615.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论