jQuery .show/.hide gets triggered multiple times
Question
I have a page with 4 tiles that display 2 options when a mouse hovers over it: New Form and Form List
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. Basically, on page load, the 2 options are hidden and the tiles are displayed. Once I hover into the first tile, the two options then get displayed using the .show() method. If my mouse leaves the tile, the .hide() method is called hiding the two options.
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. 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/
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>
1 answers
solution1
4 ACCPTED 2014-07-31 01:58:48
Use jQuery's .stop() function to stop the queueing of mouse movements:
$("#workForInspector").hover(function () {
$("#optionsContainer").stop().show("fast");
}, function () {
$("#optionsContainer").stop().hide("fast");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.