如何在jQuery中停止一个动画并立即启动下一个动画而不留下CSS包装？

我正在寻找的是能够在反弹动画完成之前单击按钮，并让它开始下一个

我知道jQuery的

.stop（true，true）

是为了停止动画并跳到结尾，但我遇到了动画包装器未清理的问题。有人知道解决这个问题的好办法吗

这是我现在拥有的基本jQuery代码，您可以在下面的JSFIDLE中找到上下文

$(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);
        }
    });
});

---

我非常感谢您在这方面的帮助。

好吧，我已经想出了一个解决方案，但它感觉非常糟糕，所以我不会把它作为答案，以防其他人想出更漂亮的解决方案。这段代码可能会干涸，我知道，我会在使用之前/如果我使用它的话重构它

---

嗨，Chris，我很好奇，在添加、删除类和制作动画之前，您在单击事件处理程序中测试了.stop（）？除了不处理包装器之外，与我在下一个提琴中修复它的方法非常相似。这很难看，但我不知道怎么做。请尝试在两个函数{抱歉，懒惰的回答}之前添加它们。show（）问题不在于停止动画，而是将标记和css恢复到动画之前的位置。请随意查看下面我的JSFIDLE，以更好地了解我是如何解决它的。