jQuery .show / .hide被多次触发

Question

我有一个包含4个图块的页面，当鼠标悬停在该页面上时会显示2个选项：“ 新建表单”和“ 表单列表”

但是，除非用户当前悬停在磁贴上，否则我希望隐藏这两个选项。 这可以正常工作，但在第一次悬停事件后执行了2或3次。 基本上，页面加载时，这2个选项被隐藏，并显示图块。 当我将鼠标悬停在第一个图块上时，然后会使用.show()方法显示这两个选项。 如果我的鼠标离开了图块，则.hide()方法称为隐藏两个选项。

但是，如果我将鼠标悬停我的鼠标回到相同的瓷砖，它执行两个.hide()和.show() 2倍，有时甚至比这更多。 我以为我做的事很愚蠢，但在网络上找不到任何帮助。 JSFiddle可以在这里找到： http : //jsfiddle.net/n97M8/

在此处输入图片说明

码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            .container
            {
                height: 150px;
                text-align:center;
            }
            .FormTiles
            {
                position: relative;
                text-align: center;
                vertical-align: middle;
                float:left;
                width: 150px;
                height: 0px;
                margin-left: auto;
                margin-right: auto;
                background-color: green;
                color: white;
                display: inline; 
                font-family: Verdana;
                font-size:small;
                margin-right: 5px;
                padding-bottom: 150px;
            }

            #optionsContainer, #optionsContainer1, #optionsContainer2, #optionsContainer3
            {
                position: absolute;
                width: 100%;
                text-align: center;
                bottom: 0;
                background-color: gray;
                padding-top: 3px;
                padding-bottom: 3px;
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="FormTiles" id="workForInspector">Work For Inspector Form
                <div id="optionsContainer">
                    <div class="FormTilesNewForm">New Form</div>
                    <div class="FormTilesToList">Form List</div>
                </div>
            </div>
            <div class="FormTiles" id="Form2">Form 2
                <div id="optionsContainer1">
                    <div class="FormTilesNewForm">New Form</div>
                    <div class="FormTilesToList">Form List</div>
                </div>
            </div>
            <div class="FormTiles" id="Form3">Form 3
                <div id="optionsContainer2">
                    <div class="FormTilesNewForm">New Form</div>
                    <div class="FormTilesToList">Form List</div>
                </div>
            </div>

            <div class="FormTiles" id="Form4">Form 4
                <div id="optionsContainer3">
                    <div class="FormTilesNewForm">New Form</div>
                    <div class="FormTilesToList">Form List</div>
                </div>
            </div>

        </div>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {

                $("#workForInspector").hover(function () {
                    $("#optionsContainer").show("fast");
                });
                $("#workForInspector").mouseout(function () {
                    $("#optionsContainer").hide("fast");
                });

            });

        </script>
    </body>
</html>

Answer 1

使用jQuery的.stop()函数停止鼠标移动的排队：

$("#workForInspector").hover(function () {
    $("#optionsContainer").stop().show("fast");
}, function () {
    $("#optionsContainer").stop().hide("fast");
});

jsFiddle示例

jQuery .show / .hide被多次触发

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-07-31 01:58:48

jQuery .show / .hide被多次触发

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-07-31 01:58:48

解决方案1
4 已采纳 2014-07-31 01:58:48