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").ne开发者_JS百科xt();

        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.

Alright I have come up with one solution but it feels pretty damn hacky so I'm gonna hold off marking it as the answer in case someone else comes up with a prettier solution. This code can be DRYed up I know, I'm gonna refactor it some before/if I use it.

http://jsfiddle.net/bQGtC/7/