toggle - トグルjqueryの遅延とアニメーション化

Question

私は周りを遊ぼうとしていますが、jquery の初心者です! だから私は明確に助けが必要です:)

$(function() {
        $('#switch').on('click', function() {
            $('#customOverlay').toggle();
        });
    });

ライト スイッチャーを作成し、customOverlay を追加してライトのオン/オフを切り替えようとしています。

それは本当にうまく機能しますが、期待どおりではありません。私はそれを1000ミリ秒ほど遅らせたいのですが、アニメーション化したいと思っています。これは、可視性のオンとオフをすばやく切り替えるだけです。これは、私がそれを遅らせることさえできない原因であり、トグルをアニメーション化する方法がわかりません。

前もって感謝します！

Answer 1

.fadeToggle() を試してください:

$(function() {
        $('#switch').on('click', function() {
            $('#customOverlay').delay(1000).fadeToggle();
        });
});

また

$(function() {
        $('#switch').on('click', function() {
            $('#customOverlay').fadeToggle(1000);
        });
});

アニメーションキューにのみ適用され、アニメーション化されないため.delay()、使用するだけで機能しない他の回答は動作しますが、動作します。.toggle.delay().toggle().fadeToggle()

Answer 2

使ってみて.delay()

$('#customOverlay').delay(1000).fadeToggle();