I am trying to create simple drop down menus so when you hover over an element it will dropdown a hidden list in an animated manner. I'm trying to keep this as simple as possible and JQuery slideToggle seems to be it but there is an issue. I can get the effect to work correctly but if I move my mouse fast on and off the hover the menu will bounce until the amount of hovers are completed. I've tried using ".stop" so as to stop the animation when the hover ends but for some reason when I hover back on again the hidden element only drops down to the point where I ending the last hover. Here is a link to an example:
http://custommediastudios.com/jdrop
And here is the code:
http://custommediastudios.com/jdrop
And here is the code:
PHP:
<!DOCTYPE html>
<html>
<head>
<style>
#blue{
background-color: blue;
width:200px;
padding: 20px;
}
p{
display:block;
background-color:red;
color: white;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$(document).ready(function() {
$("ul").hide();
$(".drop").hover(function () {
$("ul").stop().slideToggle("slow");
});
});
</script>
</head>
<body>
<div id="blue">
<p class="drop">Menu</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</body>
</html>
Last edited by a moderator: