如何停止JQuery UI addClass/removeClass？

Question

我正在使用JQuery UI来添加类(),然后使用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,而不是核心.

Answer 1

问题出现了,因为即使在删除类之后,为动画生成的插页式大小规则仍然存在于元素的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);
});

您可以在这里查看工作示例,并使用加载hack从CSS加载宽度/高度值并将其存储在对象中以模仿add/removeClass()语法.