jquery - クラスをアニメーションで切り替え

Question

私はこのようなものが欲しい：

$('#fo').toggleClass('tra', 'slow');

jQuery UIでこれを達成できることは知っていますが、サイトにさらに20〜90 kb統合したくないため、より高速で小さいソリューションを探しています

Answer 1

.animate()代わりに使用してください。変更したい個々のスタイルをアニメーション化する必要があります。たとえば.animate( { height: "500px", width: "200px" }, 2000 )、高さと幅を 2 ​​秒かけてそれらの値に変更します。jQuery UI では、クラスの変更からアニメーションを派生させることができますが、純粋な jQuery ではできません。

Answer 2

アニメーション名を第 3 パラメーターとして指定します。

$('#fo').toggleClass('big-blue', 'slow', "easeOutSine");

Answer 3

JQuery UI がなければ、適切なタイミングでトリガーされる CSS3 トランジション/アニメーション ( http://www.netmagazine.com/tutorials/getting-animations-trigger-right-timeを参照) または.animateJQuery のみを使用する必要があります。

Answer 4

次のようなことができます(ただし、これは最もクリーンではありません)。

function animateClass(el, klass) {
    var endCSS = el.toggleClass(klass).css();
    var startCSS = el.toggleClass(klass).css();
    for ( var p in endCSS ) {
        if ( startCSS[p] === endCSS[p] ) {
            delete endCSS[p];
        }
    }
    el.animate(endCSS, 'slow', function() {
        el.toggleClass(klass).removeAttr('style');
    });
};

また、他のインライン スタイルを追加しないことも前提としています。animate コールバックを次のようなものに置き換えることができると思いますが:

for ( var p in endCSS ) {
    endCSS[p] = '';
}
el.toggleClass(klass).css(endCSS);

$.fn.cssまた、すべての CSS を返すために の使用を拡張するプラグインも使用します。

簡潔な答え

CSS トランジション。