Dont fire so many times!
Dont fire so many times!
Hi fellow coders,
I have some script which technically works fine, when I roll over the link it toggles a div to either show or hide, the problem that I can't get my head round is stopping jQuery firing the slideUp and slideDow when the user hovers on and off the mouse in quick succession (says 10 or 15 times) and then sits there waiting for jQuery to stop all the animation sequences.
Code below...
-
<html>
<head>
<title>Stop Animation over firing</title>
<script type='text/javascript' src='jquery.js'></script>
<link href='screen.css' rel='Stylesheet' media='screen' />
<style type='text/css'>
#stuff
{
background: #ccc;
height: 300px;
width: 300px;
}
</style>
<script type='text/javascript'>
$(document).ready(function() {
$('#stuff').hide(); // hid it first
$('#fire').hover(function() {
$('#ani').val('hover on');
$('#stuff').slideDown(800, function() {
$('#ani').val('done');
});
return false;
}, function() {
$('#ani').val('hover off');
$('#stuff').slideUp(800, function() {
$('#ani').val('done');
});
return false;
});
return false;
});
</script>
</head>
<body>
<h1>Over Firing !</h1>
<p>Need to be able to stop animation continuosly firing, when not intended.</p>
<p>Rolling on and off 10 times, shouldn't fire it 10 times.</p>
<p>Doing What: <input type='text' name='ani' id='ani' /></p>
<p><a href='#' id='fire'>Fire Me</a></p>
<div id='stuff'>Some text</div>
</body>
</html>