Javascript 如何停止JQuery UI addClass/removeClass？

我正在使用JQuery UI添加类（），然后再使用JQuery UI删除类（）

如果在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"); }

其余的都在这里：

---

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

问题的出现是因为即使在移除类之后，为动画生成的间隙大小规则仍然存在于元素的

style

属性中

我们可以通过以下操作轻松修复该部分：

obj.stop（）

但是，这会导致动画中出现相当大的跳跃，原因是类操纵的度量没有考虑元素样式，这与简单地清除队列不起作用的原因相同。我担心，快速解决这个问题的方法相当难看：使用
.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);
});

您可以使用额外的技巧查看工作示例，从CSS加载宽度/高度值，并将它们隐藏在对象中，以模仿add/removeClass（）语法。
问题是，当您停止动画时，您的类不会应用于元素。它现在处于一种意想不到的状态。因此，删除该类没有任何效果，因为该类未应用于元素

您的最佳选择是执行以下操作：

这是我最后的结局：

$.fn.extend({
    animateClass: function (propNames, className, speed, easing, callback) {
        var $store = $("<div>").css('display', 'none').addClass(className);
        $("body").append($store);

        var i=0, len=propNames.length, name, propsMap={};
        for (i; i<len; i++) {
            name = propNames[i];
            propsMap[name] = $store.css(name);
        }
        $store.remove();

        this.stop().animate(propsMap, speed, easing, callback);
    }
});

var $obj = $("#obj");
$("#bigger").click(function(){
    $obj.animateClass(["width", "height"], "bigger", 2000, "easeOutQuad", function () { console.log("BIG"); });
});

$.fn.extend({
animateClass：函数（propname、className、speed、easing、callback）{
var$store=$（“”）.css（'display'，'none'）.addClass（className）；
$（“正文”）。追加（$store）；
var i=0，len=propNames.length，name，propsMap={}；
对于（i；i为什么不搜索样式表，获取cssText，并将其解析（我不知道如何以最好的方式）到JS对象中

通过比较CSS规则的
selectorText
成员，可以使用
document.stylesheets[i].rules
数组搜索样式表

实现这两个功能的jQuery插件是

主要的问题是它不灵活。我无法为（比如）鼠标移到元素上的子元素设置动画。理想情况下，我们应该只获取样式对象，然后将其传递到
animate（）

这种解决方案将非常棒，因为jQueryUIAddClass不支持多个选择器（AFAIK）.
我必须承认，Michal，从长远来看，将比例放在变量中是我应该做的事情。虽然从长远来看，我希望看到jQuery能够智能地处理这些情况——我无法想象默认行为（无声地锁定元素的动画状态）会在什么情况下发生真的吗？JQuery/UI不能用外部样式表处理这个问题？不是很漂亮。有没有插件可以做得更好？我想避免使用硬编码（无论是否存储在变量中）表示数据进入我的行为层…据我所知，不，它不能。我同意这是非常糟糕的。我不知道有任何插件可以真正解决这个问题，但如果你想做一点腿部工作，你可以在页面上的某个地方放一个隐藏的
div
，将包含你的类的元素放在里面，然后阅读文章这些元素中的t个。这样更改CSS会自动更改jQuery脚本。这也是一个有点垃圾的解决方案，但欢迎使用web开发。：/@sudowned--确实欢迎使用web开发。我还是从flash开发的岁月中成长起来的；）至少我没有任何跨浏览器的问题…无论如何，我可能会接受这一点，但会等着看是否有其他的建议。谢谢！Flash？！你这个可怜的家伙。现在一切都好了，一切都会…好吧，也许不是。是的，我肯定会推迟一点-令人沮丧的是，如果
addClass支持
{queue:false}
一切都会很好，但事实并非如此。可惜现在喝酒还为时过早。+1用于解释为什么它不起作用——没有可以删除的类。这可能不在主题范围内，但您可能想查看
CSS3
的
转换属性。当然，它相对较新，而且许多旧浏览器不支持这么多，但这里有一些解决问题的jquery插件