延迟和动画切换jquery

Question

我正在尝试玩arround，我完全是jquery的新手！所以我肯定需要一些帮助：）

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

我制作了一个灯光切换器，我试图通过添加customOverlay打开/关闭灯光。

它工作得很好但不如预期。我想延迟它像1000毫秒，我想动画它因为这样它只是快速打开和关闭可见性。这是可能的原因我甚至无法推迟它，我不知道我将如何设置切换动画。

提前谢谢！

Answer 1

尝试.fadeToggle()：

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

OR

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

仅使用.delay()和.toggle的其他答案将无效，因为.delay()仅适用于动画队列且.toggle()未设置动画，而{.fadeToggle() 1}}确实。

Answer 2

尝试使用.delay()

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