JQuery events not firing sequentially
I'm trying to do something pretty simple. I want to bring up the menu from behind the image and make it fade in and out on transition.
So by default the z-index of the menu is set to -1 and the image is set to 1.
When you hover over the table, I slide the slide animation and timeout function to change the z-index of the menu to 2. When you hover over the table, I set the z-index back to -1 and animate backward past the image.
This should work and it does happen sometimes. I notice, especially if I set mouseover to hover, that sometimes the mouseover \ hover function fires after mouseleave fires when the mouse is nowhere near the table in which it is set.
So what happens is that sometimes the z-index doesn't change as expected and you can see the menu appears in front of the image during its transition. Sometimes it still works fine. You think it will work the same every time, for better or for worse.
I've tried different methods. I use a timeout because it was difficult to keep the two out of line animations when the function runs when the last animation finishes.
Here is my code:
<script type="application/javascript">
$( document ).ready(function() {
$("#headerTable").mouseover(function(){
$("#movableMenu")
.animate({top: "0px"}, {duration: 750, queue:false})
.animate({opacity: "1"}, {duration: 1500, queue:false});
setTimeout(function() {
console.log("Out: " + $("#movableMenu").css('z-index'));
$("#movableMenu").css('z-index', 2);
console.log("Out: " + $("#movableMenu").css('z-index'));
}, 1500);
});
$("#headerTable").mouseleave(function() {
console.log("In: " + $("#movableMenu").css('z-index'));
$("#movableMenu").css('z-index', -1);
$("#movableMenu")
.animate({top: "-55px"}, {duration: 750, queue:false})
.animate({opacity: "0"}, {duration: 1500, queue:false});
console.log("In: " + $("#movableMenu").css('z-index'));
});
$(".menuItem").hover(function(){
$(this).css('color', 'teal');
$(this).css('font-size', '18');
$(this).css('font-weight', 'bold');
});
$(".menuItem").mouseout(function(){
$(this).css('color', 'black');
$(this).css('font-size', '16');
$(this).css('font-weight', 'normal');
});
});
</script>
</head>
<body>
<table id="headerTable" align="center" border="1">
<tr>
<td><img width="600px" height="225px" src="images/heading2.png" style="z-index:2" /></td>
</tr>
<tr>
<td>
<div id="movableMenu" style="width:100%; height:50px; position:relative; top:-55px; z-index:-1; opacity:0">
<span class="menuItem">Home</span><span class="menuItem">Bio</span><span class="menuItem">Media</span><span class="menuItem">Scores</span><span class="menuItem">Lessons</span><span class="menuItem">Repertoire</span><span class="menuItem">Contact</span><span class="menuItem">Links</span>
</div>
</td>
</tr>
</table>
source to share
CSS transitions are the best there is now to animate elements on the web. You must try. I am creating a fiddle based on yours, with CSS only, no JavaScript required. And not too much CSS.
CSS
.menuItem {
display:inline-block;
text-align:center;
margin: 0 8px;
height:200px;
vertical-align:top;
cursor:pointer;
color: black;
font-size: 16px;
font-weight: normal;
}
.menuItem:hover {
color: teal;
font-size: 18px;
font-weight: bold;
}
#movableMenu{
position:relative;
width:100%;
height:50px;
top: -55px;
opacity: 0;
z-index: 2;
transition: 1s;
-webkit-transition: 1s; /* You can change the speed */
}
#headerTable:hover #movableMenu{
top: 0;
opacity: 1;
}
It might need some tweaking but it works.
source to share