How can I stop an animation in jQuery and immediately start the next without the CSS wrapper getting left?

What I am looking for is to be able to click the buttons before the bounce animation is finished and have it start the next one.

I’m aware of jQuery’s .stop(true, true) in order to stop the animation and jump to the end but I’m having trouble with the animation wrapper not being cleaned up. Anyone know a nice solution for this?

This is the basic jQuery code I have now and you can find the context in the jsfiddle below.

$  (function(){
    $  ("#right").click(function(){
        var $  next = $  (".visible").next();

        if ($  next.hasClass("slide")) {
            $  (".visible").removeClass("visible").hide();
            $  next.addClass('visible').show('bounce', { direction: 'right', times: 3 }, 500);
        }
    });

    $  ("#left").click(function(){
        var $  prev = $  (".visible").prev();

        if ($  prev.hasClass("slide")) {
            $  (".visible").removeClass("visible").hide();
            $  prev.addClass('visible').show('bounce', { direction: 'left', times: 3 }, 500);
        }
    });
});

http://jsfiddle.net/bQGtC/2/

I appreciate any help on this.

newest questions tagged jquery – Stack Overflow