如何停止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（）語法。

Answer 2

問題是當您停止動畫時，您的類不會應用於該元素。 它現在處於一個意料之外的狀態。 因此刪除該類沒有任何效果，因為該類未應用於該元素。

你最好的選擇是做這樣的事情：

http://jsfiddle.net/nickaknudson/8UnRd/

Answer 3

這是我最終結束的地方：

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

這里有多個狀態的工作示例。

這不是最漂亮的事情，因為它需要傳遞一個css屬性列表才能在動畫中使用，而不是只使用樣式表中的所有東西，但我找不到一種方法來將樣式表中指定的屬性與其他所有屬性分開已經在animateClass（）中創建的虛擬“$ store”div上的樣式。

我會接受@ sudowned的回答，因為這對我來說是最有幫助的。

Answer 4

為什么不搜索樣式表，抓住cssText，並將其解析（我不確定如何以最佳方式執行此操作）到JS對象中？

可以使用document.stylesheets[i].rules數組，通過比較CSS規則的selectorText成員來搜索樣式表。

一個執行這兩個操作的jQuery插件是animateToSelector 。

主要問題是它不靈活。 我無法為一個（比如）moused over元素的孩子制作動畫。 理想情況下，我們應該簡單地獲取我們可以傳遞給animate()的樣式對象animate()

這種解決方案很棒，因為jQuery-UI addClass不支持多個選擇器（AFAIK）。