延迟和动画切换jQuery

Question

我正在尝试玩转 JQuery，但是我完全是一个新手！因此，我肯定需要一些帮助 :)

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

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

它运行得很好，但不是我期望的结果。我想要延迟大约1000毫秒，并且想要动画效果，因为现在只是快速地打开和关闭能见度。这是否可能？因为我甚至无法延迟它，也不知道如何切换动画。

提前致谢！

- dvlden

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()会执行动画。

- j08691

---

哇...这个工作非常完美。感谢您的快速回答。我还没有见过.fadeToggle。对不起：] - dvlden

不用道歉，很高兴能帮忙。 - j08691

Answer 2

尝试使用.delay()

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

- Sushanth --