Good call, I didn't know about stop(). I have one more problem though: stop() stops all animations, so the next action (hide all of these boxes if any is clicked) gets halted. I tried using unbind(), but it looks like it's either not working or (more likely) is being terminated by the hover() method before it has a chance to finish. I tried to go a step deeper, separating this into mousedown and mouseup events (unbind on mouse down, fadeOut on mouse up) but the hovered element doesn't hide if it's hovered after the click.
Updated: http://703designs.com/jQuery/port.php On Oct 13, 11:32 pm, ricardobeat <[EMAIL PROTECTED]> wrote: > Stop all previous animations before starting a new one: > > $(".block img").hover(function() { > $(this).stop().animate({ > width: '120px', > height: '120px', > marginTop: '5px', > }, "normal") > },function(){ > $(this).stop().animate({ > width: '80px', > height: '80px', > marginTop: '25px', > }, "normal") > }); > > - ricardo > > On Oct 13, 5:05 pm, 703designs <[EMAIL PROTECTED]> wrote: > > > Using either $.fn.hover or $.fn.mouse(over|out), I can't figure out > > how to prevent my animations from firing repeatedly. You'll see what I > > mean:http://703designs.com/jQuery/port.php(viewsource to see what's > > going on). > > > How would I change this so that the over/hover event can't fire until > > the element is finished with its current animation? How would I change > > this so an animation only continues until the mouse leaves rather than > > taking the full step from 80px h/w to 120px h/w? > >
