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!

Fresheyeball · Answer 1 · 2013-01-21T20:04:31.467

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/

edited Jan 21 '13 at 20:04

answered Jan 21 '13 at 17:13

Fresheyeball

29,567
20
102
164

I'm noticing that if you do the following steps: Hover HoverOut – SC_Chupacabra Jan 21 '13 at 18:38
I'm sorry, I posted before I was done. If you hover, hoverOut and hover again it's still freezing the animation indefinitely. The code you posted is an improvement (thanks for that), but the bizarre freezing still occurs... and I'm not quite sure why. – SC_Chupacabra Jan 21 '13 at 19:05
...Unless, every time the hover event occurs, maybe the new hover event is in a different scope than the old one and thus can't directly manipulate the queued animation? – SC_Chupacabra Jan 21 '13 at 19:25
I have another thought, but it wont animate in ie6-9. Does it matter to you if it does not animate in those browsers? – Fresheyeball Jan 21 '13 at 19:30
Hmmmm.... I didn't think about that! Great solution. I know that approach would work for my client, but I still think it would drive me crazy not knowing how to solve this. Part of it, is I've been trying to get better at doing these subtle little UI touches, so I want to keep hacking at it until I figure out the jQuery approach. This way, next time around I'll have some nice code I can go back to and reference. – SC_Chupacabra Jan 21 '13 at 19:43
Definitely better, but I want the exact same functionality as the CSS only approach, but in jQuery so as to avoid the need for an ie fallback. I'm gonna mess around with later tonight and report back. Thanks so much!!! You're awesome. – SC_Chupacabra Jan 21 '13 at 20:17

jQuery Animation Stop / Resume Techniques or Patterns

1 Answers1