jQuery .show / .hide被多次触发

Question

I have a page with 4 tiles that display 2 options when a mouse hovers over it: New Form and Form List 我有一个包含4个图块的页面，当鼠标悬停在该页面上时会显示2个选项：“ 新建表单”和“ 表单列表”

However, I want these two options hidden unless the user is currently hovered over the tile. 但是，除非用户当前悬停在磁贴上，否则我希望隐藏这两个选项。 This is working fine but it does it 2 or 3 times after the first hover event. 这可以正常工作，但在第一次悬停事件后执行了2或3次。 Basically, on page load, the 2 options are hidden and the tiles are displayed. 基本上，页面加载时，这2个选项被隐藏，并显示图块。 Once I hover into the first tile, the two options then get displayed using the .show() method. 当我将鼠标悬停在第一个图块上时，然后会使用.show()方法显示这两个选项。 If my mouse leaves the tile, the .hide() method is called hiding the two options. 如果我的鼠标离开了图块，则.hide()方法称为隐藏两个选项。

However, if I hover my mouse back into the same tile, it executes both .hide() and .show() 2 times and sometimes even more than that. 但是，如果我将鼠标悬停我的鼠标回到相同的瓷砖，它执行两个.hide()和.show() 2倍，有时甚至比这更多。 I'm assuming I'm doing something stupid but can't find any help on the web. 我以为我做的事很愚蠢，但在网络上找不到任何帮助。 JSFiddle can be found here: http://jsfiddle.net/n97M8/ JSFiddle可以在这里找到： http : //jsfiddle.net/n97M8/

在此处输入图片说明

CODE: 码：

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

Use jQuery's .stop() function to stop the queueing of mouse movements: 使用jQuery的.stop()函数停止鼠标移动的排队：

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

jsFiddle example 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