jquery - jQuery トグル アニメーション不要

Question

私は目が見えないかもしれませんか、アニメーションを無効にするパラメータ、オプション、または何かがありません:

。トグル（）

トグル（）を介してそれらを表示（）および非表示（）したいだけですが、スライドトグル、フェードトグル、または通常のトグルを使用するすべてのトグルはアニメーション付きです。

それらを「削除」する方法は？

Answer 1

toggle() へのパラメーターが 1 ではなく true に解決されることを確認してください。

toggle(1); // animation 
toggle(true); // no animation.

Answer 2

引数が指定されていない場合、 toggle() は即時です。

slideToggle() と fadeToggle() は、アニメーションにデフォルト値を使用します。アニメーションを即時にするには、値「0」を渡します。

これらはすべて同じことを行い、要素を表示および非表示にするだけです。

$('button').on('click', function() {
    ToggleElement.toggle();
});

$('button').on('click', function() {
    ToggleElement.slideToggle(0);
});

$('button').on('click', function() {
    ToggleElement.fadeToggle(0);
});

フィドル

ただし、アニメーションなしで下の 2 つを使用する理由はありません。

element.style.display = 'none'/'block'if / else ステートメントでJavaScript ネイティブを使用するだけで、少し速くなります。

Answer 3

引数なしで toggle を使用するだけで、即座に実行されます。

ドキュメントから：

パラメーターを指定しない場合、.toggle() メソッドは単純に要素の可視性を切り替えます。

$('.target').toggle();

Answer 4

いつでも独自のトグル関数を提供できます。

$.fn.quicktoggle = function() {
    this.each(function() {
        var $this = $(this);
        if ($this.is(':visible')) {
            $this.hide();
        } else {
            $this.show();
        }
    });
    return this;
};

Answer 5

コード内のすべてのインスタンスを簡単に置き換えたい場合は、もう少し「印象的な」方法として関数をオーバーライドします。

$.fn.slideToggle = function(duration, callback ) {
    duration = 0;
    callback = callback || function(){};
    this.toggle(duration, callback);
};

$.fn.fadeToggle = function(duration, callback) {
    duration = 0;
    callback = callback || function(){};
    this.toggle(duration, callback);
};

デモ: http://jsfiddle.net/bChVe/3/