jQuery Animation Stop / Resume Techniques or Patterns

Question

I've seen some other - semi-related posts - but nothing that really 100% answers my question.

In any event, what I'd like to do is pause+fadeIn onHover, pause+fadeOut onHoverOut, this way the animation doesn't go to completion unless the user stays hovered or hoverOuted. If the user does a bunch of quick hovers and hover outs, I don't want it to queue up a bunch of consecutive animations. I've gotten close using stop() and clearQueue(), but there are problems.

If I hover, hoverOut and hover again quickly, the animation does pause but does not transition to the next animation. As a matter of fact, enough hover and hoverOuts causes the animations to stop happening completely on my computer.

Check out the example page below and the attached script. Maybe there is a common pattern or approach to this particular question? I see similar things done online quite a bit, sometimes with fade animations, sometime with motion animations, etc.

In the example, I'm intentionally using a slow animation time so you have time to hover in and out enough times.

Demo: http://ficreates.com/_SiteDemos/lwv2/

Script: http://ficreates.com/_SiteDemos/lwv2/scripts/carNav.js

Anyhow, thanks in advance for any help you can give me :) I certainly need it!

Answer 1

Is this what you are looking for?

    function carNav() {
        var $navBox = $("#nav_buttons li");

        $navBox.hover(
            function() {
                var $navCar = $(this).find(".nav_car");
                $navCar.fadeIn(2000);
            },
            function() {
                var $navCar = $(this).find(".nav_car");                 
                $navCar.stop().fadeOut(2000);
            }
        );
    }

    $(document).ready(carNav);

DEMO http://jsfiddle.net/m2pF5/

or you can do it entirely with css, (will require a fallback for ie)

CSS DEMO http://jsfiddle.net/eNJ6x/1/