Delay and animate toggle jquery

Question

I am trying to play arround and I am totally newbie with jquery! So I need some help definetly :)

Click to copy

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

I made an light switcher and I am trying to turn the light on/off by adding customOverlay.

It works really fine but not as expected. I want to delay it for like 1000ms and I want to animate it cause this way it just turn the visibility on and off really quick. Is this possible cause I cannot even delay it and I dont know how would I animate toggle.

Thank you in advance!

Answer 1

Try .fadeToggle() :

Click to copy

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

OR

Click to copy

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

The other answers that only use .delay() and .toggle won't work because .delay() only applies to the animation queue and .toggle() doesn't animate, while .fadeToggle() does.

Answer 2

Try using .delay()

Click to copy

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