延迟和动画切换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();
        });
});

要么

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

其他答案仅使用.delay()和.toggle不起作用,因为.delay()仅适用于动画队列而.toggle()不是动画,而.fadeToggle()确实如此.