Verstecke div nach ein paar Sekunden

Ich habe mich gefragt, wie ich in der Lage bin, ein Div nach ein paar Sekunden zu verstecken. Wie zum Beispiel die Nachrichten von Google Mail.

Ich habe mein Bestes versucht, kann es aber nicht zum Laufen bringen.

Dadurch wird das Div nach 1 Sekunde (1000 Millisekunden) ausgeblendet.

setTimeout(function() {
    $('#mydiv').fadeOut('fast');
}, 1000); // <-- time in milliseconds

#mydiv{
    width: 100px;
    height: 100px;
    background: #000;
    color: #fff;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">myDiv</div>

Wenn Sie sich nur verstecken möchten, ohne zu verblassen, verwenden Sie hide().

Sie können das versuchen .delay()

$(".formSentMsg").delay(3200).fadeOut(300);

Rufen Sie das div auf, legen Sie die Verzögerungszeit in Millisekunden fest und legen Sie die Eigenschaft fest, die Sie ändern möchten. In diesem Fall habe ich .fadeOut () verwendet, damit es animiert werden kann, aber Sie können auch .hide () verwenden.

http://api.jquery.com/delay/

jquery bietet eine Vielzahl von Methoden, um das div zeitgesteuert auszublenden, ohne dass Intervall-Timer oder andere Ereignishandler eingerichtet und später gelöscht oder zurückgesetzt werden müssen. Hier einige Beispiele.

Reine Haut, eine Sekunde Verzögerung

// hide in one second
$('#mydiv').delay(1000).hide(0); 

Reine Haut, keine Verzögerung

// hide immediately
$('#mydiv').delay(0).hide(0); 

Animiertes Fell

// start hide in one second, take 1/2 second for animated hide effect
$('#mydiv').delay(1000).hide(500); 

ausblenden

// start fade out in one second, take 300ms to fade
$('#mydiv').delay(1000).fadeOut(300); 

Darüber hinaus können die Methoden einen Warteschlangennamen oder eine Funktion als zweiten Parameter verwenden (abhängig von der Methode). Die Dokumentation aller oben genannten Anrufe und anderer damit zusammenhängender Anrufe finden Sie hier: https://api.jquery.com/category/effects/

Es gibt einen wirklich einfachen Weg, dies zu tun.

Das Problem ist, dass .delay nur Animationen bewirkt. Sie müssen also .hide () wie eine Animation verhalten, indem Sie ihm eine Dauer geben.

$("#whatever").delay().hide(1);

Durch eine schöne kurze Dauer scheint es genau wie die reguläre .hide-Funktion sofort zu sein.

$.fn.delay = function(time, callback){
    // Empty function:
    jQuery.fx.step.delay = function(){};
    // Return meaningless animation, (will be added to queue)
    return this.animate({delay:1}, time, callback);
}

Von http://james.padolsey.com/javascript/jquery-delay-plugin/

(Ermöglicht die Verkettung von Methoden)

Wenn Sie den jQuery-Timer verwenden, können Sie auch einen Namen für die Timer festlegen, die an das Objekt angehängt sind. Sie können also mehrere Timer an ein Objekt anhängen und einen davon stoppen.

$("#myid").oneTime(1000, "mytimer1" function() {
  $("#something").hide();
}).oneTime(2000, "mytimer2" function() {
  $("#somethingelse").show();  
});

$("#myid").stopTime("mytimer2");

Die eval-Funktion (und ihre Verwandten Function, setTimeout und setInterval) bieten Zugriff auf den JavaScript-Compiler. Dies ist manchmal notwendig, zeigt jedoch in den meisten Fällen das Vorhandensein einer extrem schlechten Codierung an. Die Auswertungsfunktion ist die am häufigsten missbrauchte Funktion von JavaScript.

http://www.jslint.com/lint.html

Am einfachsten ist es wahrscheinlich, das Timer-Plugin zu verwenden. http://plugins.jquery.com/project/timers und rufen Sie dann so etwas auf

$(this).oneTime(1000, function() {
    $("#something").hide();
  });

wir können direkt verwenden

$('#selector').delay(5000).fadeOut('slow');

<script>
      $(function() {
      $(".hide-it").hide(7000);
    });              
</script>

<div id="hide-it">myDiv</div>