jQuery - Vertraging instellen


In het geval dat je bepaalde effecten wilt toepassen maar hier enige vertraging in wilt aanbrengen dan kan dat op de onderstaande manier. Stel een vertraging in zodat een effect pas na een aantal seconden toegepast wordt. In het onderstaande geval is de vertraging ingesteld op twee seconden, daarna zal het element tevoorschijn komen.

$(document).ready(function() {
        $('.link').click(function() {
                setTimeout(function(){
                        $('.element').fadeIn(1000);
                }, 2000);
        });
});


Een ander voorbeeld.

$(document).ready(function() {
        var interval = false;
        $('.link').mouseover(function(){
                interval = setInterval(function(){
                        $('.element').slideToggle(1000);
                }, 2000);
        });

        $('.link').mouseout(function(){
                clearInterval(interval);
                interval = false;
        });
});

Delay

Een alternatieve manier en in sommige gevallen handiger is door 'delay' toe te voegen in plaats van setTimeout. Hieronder in de code is de vertraging ingesteld op 5 seconden.

$(document).ready(function() {
        $('#main').click(function() {
                $('.element').delay(5000).fadeIn(1000);
        });
});