当我在特定区域鼠标悬停&& mouseout时如何禁用/取消setTimeOut？

Question

当我在特定区域鼠标悬停&& mouseout时如何禁用/取消setTimeOut？

pro*_*mer 3 javascript jquery settimeout

我有一个简单的水平菜单有四个选择.当我鼠标悬停一个div(例如div A)时,它的子节点出现,当我鼠标输出该特定div时,它的孩子就会消失.

我已经为mouseover放置了一个setTimeOut函数(大约是300).

在某些特定条件下,我想禁用setTimeout

1.当我的mouseout DIV一个 和我鼠标悬停DIV乙,我会不喜欢有延迟,我想只是为了显示B的childDiv

2.当我使用鼠标输出div B 而我将鼠标移到div C时,我不希望有这种延迟,我想只是为了显示C的childDiv

但我怎么能实现那个？

只是我有一系列事件:(一个简单的算法)

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
   }

   }

Run Code Online (Sandbox Code Playgroud)

通常,当我在"foo"div中鼠标悬停&& mouseout时,(foo是包含所有div的div),应禁用settimeout.

这可以在jquery中完成吗？

我的代码如下:

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Fra*_*isc 7

分配变量然后清除它如下:

var myInterval=setTimeout(...);

要禁用:

clearTimeout(myInterval);

请注意,分配给setTimeout的变量具有清除超时的范围.此外,每个变量只保留一个间隔.如果覆盖它,它将不会清除先前的超时.(除非它是一个具有多个键/属性的数组或对象,在这种情况下你无法清除整个数组/对象,你需要遍历它们并一次清除每个数组/对象.)

归档时间：	14 年，5 月前
查看次数：	7315 次
最近记录：	14 年，5 月前