CODEWITHSUNDEEP
togglejquery
dvlden
dvlden

Reputation: 2462

Delay and animate toggle jquery

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

$(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!

Upvotes: 5

Views: 22296

Answers (2)

Sushanth --
Sushanth --

Reputation: 55750

Try using .delay()

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

Upvotes: 1

j08691
j08691

Reputation: 207983

Try .fadeToggle() :

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

OR

$(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.

Upvotes: 15

Related Questions