4

私はJQueryUIを使用してaddClass（）を使用し、後でremoveClass（）を使用しています。

addClass（）が完了する前にremoveClass（）が呼び出されると、キューに入れられ、後で実行されます。これは理想的ではありません。むしろ、removeClass（）を現在のCSS値からすぐに実行するようにします。

add / removeClass（）の直前にstop（）を呼び出すと、add / removeClass（）コールバックは引き続き起動しますが、stop（）呼び出しの瞬間にアニメーションが永続的に「フリーズ」しているように見えます。

ここの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用であり、コアではないことに注意してください。

4

4 に答える 4

7

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

ここで実際の例を確認できます。ボーナスハックを使用して、CSSから幅/高さの値をロードし、それらをオブジェクトに隠して、add / removeClass（）構文を模倣します。

于 2012-09-02T17:24:34.553 に答える
1

問題は、アニメーションを停止すると、クラスが要素に適用されないことです。現在、予期しない状態になっています。したがって、クラスは要素に適用されないため、クラスを削除しても効果はありません。

あなたの最善の策は、次のようなことをすることです。

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

于 2012-09-02T17:27:23.077 に答える
1

これが私が最終的に終わったところです：

$.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の答えは、私をここに導くのに最も役立ったので、受け入れます。

于 2012-09-02T19:23:35.483 に答える
1

スタイルシートを検索し、cssTextを取得して、JSオブジェクトに解析します（これを最善の方法で行う方法がわかりません）。

スタイルシートは、CSSルールdocument.stylesheets[i].rulesのメンバーを比較することにより、配列を使用して検索できます。selectorText

これらの両方を行うjQueryプラグインの1つは、animateToSelectorです。

主な問題は、柔軟性がないことです。（たとえば）マウスオーバー要素の子をアニメートすることはできません。理想的には、渡すことができるスタイルオブジェクトを取得するだけです。animate()

jQuery-UI addClassは複数のセレクター（AFAIK）をサポートしていないため、この種のソリューションはすばらしいでしょう。

于 2012-10-31T07:53:49.847 に答える