javascript - 如何停止 JQuery UI addClass/removeClass？

我使用 JQuery UI 来 addClass()，然后是 removeClass()。

如果在 addClass() 完成之前调用 removeClass()，它会排队并稍后执行。这并不理想，我宁愿让 removeClass() 从当前的 CSS 值中立即执行。

如果我在 add/removeClass() 之前调用 stop()，动画在 stop() 调用的那一刻似乎永久“卡住”，尽管 add/removeClass() 回调仍然触发。

只是这里的JS:

var obj = $("#obj");
obj.addClass("obj");

$("#add").click(function(){
    //obj.addClass("adder", 2000, "easeInOutCubic", onAdded);
    obj.stop().addClass("adder", 2000, "easeInOutCubic", onAdded);
});

$("#remove").click(function(){
    //obj.removeClass("adder", 2000, "easeInOutCubic", onRemoved);
    obj.stop().removeClass("adder", 2000, "easeInOutCubic", onRemoved);
});

function onAdded () { console.log("added"); }
function onRemoved () { console.log("removed"); }

其余的都在这里:http://jsfiddle.net/mmstM/42/

这似乎是一个常见问题，但在 SO 或其他地方没有找到任何好的信息......注意这是针对 JQuery UI，而不是核心。

最佳答案

之所以会出现此问题，是因为即使删除了类，为动画生成的间隙大小规则仍然存在于元素的 style 属性中。

我们可以通过执行以下操作来轻松修复该部分:
obj.stop().attr("style", "").removeClass("adder", 2000, "easeInOutCubic", onRemoved);
但是，这会导致动画出现相当大的跳跃，因为用于类操作的 缓动不考虑元素样式 - 这与最初简单地清除队列不起作用的原因相同。我担心，对此的快速解决方案非常难看:改为使用 .animate() 方法，并将样式从类移动到您的 jQuery，如下所示:

$("#add").click(function(){
    //obj.addClass("adder", 2000, "easeInOutCubic", onAdded);
    obj.stop().animate({
        width: '200px',
        height: '80px',
    }, 2000, "easeInOutCubic", onAdded);
});

$("#remove").click(function(){
    //obj.removeClass("adder", 2000, "easeInOutCubic", onRemoved);
    obj.stop().animate({
        width: '40px',
        height: '40px',
    }, 2000, "easeInOutCubic", onRemoved);
});

您可以查看带有额外技巧的工作示例 here, 以从 CSS 加载宽度/高度值并将它们存储在对象中以模仿 add/removeClass() 语法。

关于javascript - 如何停止 JQuery UI addClass/removeClass？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12238016/