[jQuery] Stopping slideUp/slideDown mid animation
I'm using slideUp and slideDown to animate a drop down menu.
If i mouse on/off the menu in very quick succession the sliding up and
down animations stack up so that when you take your mouse away from it
it is still animating up and down. Is there any way to stop the
animation in the same way that you'd stop animate:
$(".element").stop().animate(etc...
If i use .stop() on slideDown/slideUp it stops the element from
expanding again beyond the size it was stopped at. I hope that makes
sense.
Here is my code:
$(".ClientMenu").hover(function () {
$(".ClientMenuBody").slideDown("medium");
},
function () {
$(".ClientMenuBody").slideUp("fast");
});
And HTML:
<div class="ClientMenu">
<div class="ClientMenuHead">
by client
</div>
<ul class="ClientMenuBody">
<li class="SlidingElement"><a href="#">Lorem Ipsum</a></li>
<li><img class="DottedLine" src="Images/DottedLine.gif"
width="150" height="2" /></li>
<li class="SlidingElement"><a href="#">Lorem Ipsum</a></li>
<li><img class="DottedLine" src="Images/DottedLine.gif"
width="150" height="2" /></li>
<li class="SlidingElement"><a href="#">Lorem Ipsum</a></li>
<li><img class="DottedLine" src="Images/DottedLine.gif"
width="150" height="2" /></li>
<li class="SlidingElement"><a href="#">Lorem Ipsum</a></li>
<li><img class="DottedLine" src="Images/DottedLine.gif"
width="150" height="2" /></li>
<li class="SlidingElement"><a href="#">Lorem Ipsum</a></li>
<li><img class="DottedLine" src="Images/DottedLine.gif"
width="150" height="2" /></li>
<li class="SlidingElement"><a href="#">Lorem Ipsum</a></li>
<li><img class="DottedLine" src="Images/DottedLine.gif"
width="150" height="2" /></li>
<li class="SlidingElement"><a href="#">Lorem Ipsum</a></li>
<li><img class="DottedLine" src="Images/DottedLine.gif"
width="150" height="2" /></li>
<li class="SlidingElement"><a href="#">Lorem Ipsum</a></li>
</ul>
</div>