40

私のウェブサイトには、ユーザーがクリックしたときに展開したいセクションがあり、これには jQuery を使用してtoggleClassいます...

expandable: function(e) {
    e.preventDefault();
    $(this).closest('article').toggleClass('expanded', 1000);
}

これはうまく機能していますが、どうにかしてアニメーション化したいと思っています。クロムでは、私の記事はゆっくりと新しいサイズに成長します.Firefoxでのみ、アニメーションなしで「即座に」サイズが変更されます.

4

6 に答える 6

65

jQuery UIは、jQueryネイティブtoggleClassを拡張して、2番目のオプションのパラメーターを取ります。duration

toggleClass( class, [duration] )

ドキュメント+デモ

于 2012-06-24T17:12:48.197 に答える
26

.toggleClass()slideToggle()または.animate()メソッドを使用する必要があります。

于 2012-06-24T16:42:11.877 に答える
17

CSSトランジションを簡単に使用できます。このフィドルを参照してください

.on {
color:#fff;
transition:all 1s;
}

.off{
color:#000;
transition:all 1s;
}
于 2015-02-27T02:42:54.647 に答える
8

私のサイトのアイテムを非表示にするために toggleClass メソッドを使用しようとしました (display:none ではなく、visibility:hidden を使用して) わずかなアニメーションを使用しましたが、何らかの理由でアニメーションが機能しませんでした (おそらく古いバージョンの jQuery UI が原因でした) ）。

クラスは正しく削除および追加されましたが、追加した期間に違いはないようでした。アイテムは単に追加または削除されただけで、何の効果もありませんでした。

これを解決するために、トグル メソッドで 2 番目のクラスを使用し、代わりに CSS トランジションを適用しました。

CSS:

.hidden{
    visibility:hidden;
    opacity: 0;
    -moz-transition: opacity 1s, visibility 1.3s;
    -webkit-transition: opacity 1s, visibility 1.3s;
    -o-transition: opacity 1s, visibility 1.3s;
    transition: opacity 1s, visibility 1.3s;
}
.shown{
    visibility:visible;
    opacity: 1;
    -moz-transition: opacity 1s, visibility 1.3s;
    -webkit-transition: opacity 1s, visibility 1.3s;
    -o-transition: opacity 1s, visibility 1.3s;
    transition: opacity 1s, visibility 1.3s;
}

JS:

    function showOrHide() {
        $('#element').toggleClass("hidden shown");
    }

この投稿に対する素晴らしい（そして非常にシンプルな）回答をありがとう@tomas.satinsky 。

于 2016-04-16T15:12:47.423 に答える
6

jQuerytoggleにある関数を見てください。これにより、イージング メソッドを指定して、トグルの動作を定義できます。

slideToggleそれがあなたが探しているものである場合、左右ではなく上下にのみスライドします。

クラスもトグルする必要がある場合は、toggle関数で次のように定義できます。

$(this).closest('article').toggle('slow', function() {
    $(this).toggleClass('expanded');
});
于 2012-06-24T16:44:26.097 に答える
0

チェックする必要がありました.jQuery UIライブラリを含めると、正常に機能し、アニメーション化されました...

于 2012-06-24T16:49:43.893 に答える