Ändern der Klasse eines Divs nach einer Zeitverzögerung

Question

Ich möchte einer div-Element (id="one") 10 Sekunden nach dem Laden einer Seite eine Klasse hinzufügen, ohne dass etwas angeklickt oder darauf gehovered wird. Ich habe den folgenden Code ausprobiert, aber er funktioniert nicht:

$(document).ready(function(){
$('#one').delay(10000).addClass("grow")
});

Hast du eine Idee, wo der obige Code falsch liegt?

Answer 1

Die Methode delay fügt ein Element zur Animationswarteschlange hinzu, aber da addClass keine Animationswirkung ist, wird es nicht in die Warteschlange gestellt, es wirkt sofort.

Sie können die Methode queue verwenden, um Code in die Animationswarteschlange einzufügen, damit er nach der Verzögerung ausgeführt wird:

$('#one').delay(10000).queue(function(){
  $(this).addClass("one");
});

Demo: http://jsfiddle.net/6V9rX/

Alternativ zur Verwendung von Animation für die Verzögerung können Sie die Methode setTimeout verwenden:

window.setTimeout(function(){
  $('#one').addClass("one");
}, 10000);

Answer 2

DEMO

$(document).ready(function(){
    window.setTimeout(function(){
        $("#one").addClass("one");
    },10000);
});

Answer 3

Verzögerung funktioniert nur bei Elementen in der Warteschlange von jQuery. Da addClass standardmäßig nicht eine Animation zur Warteschlange hinzufügt, wird es unabhängig von der Verzögerung sofort ausgeführt. Für allgemeine Verzögerungen solltest du Javascripts nativen setTimeout verwenden:

$(function(){
    setTimeout(function() {
        $('#one').addClass("grow")
    }, 10000);
});

jsfiddle