Verstecke div nach ein paar Sekunden

123

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.

James
quelle
1
Ist das Verstecken gerade gut genug oder brauchst du es, um zu verblassen?
Joel Coehoorn

Antworten:

247

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

Swilliams
quelle
2
und du hast den verrückten Joel Coehoorn auf einen Schlag sehr schön geschlagen ! :)
Cregox
3
@ James, Sicher gibt es keinen Unterschied im Endergebnis, aber ich nehme an, dass die Implementierung mit .delay()"nativer" und eleganter ist jQuery.
Paul T. Rawkeen
Sie können ersetzen .fadeOut('fast')mit .hide()für sofortige Haut des div.
Raptor
90

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/

Peter Punk
quelle
7
Dies ist besser, da ich setTimeout nicht verwenden muss und der Code leichter zu lesen ist.
Marek Bar
12

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/

Robert Mauro
quelle
10

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.

Oisin Lavery
quelle
6
$.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)

Peter Smit
quelle
3

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

Kamaci
quelle
2

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();
  });
stimms
quelle
1
Gibt es einen zwingenden Grund, das Timer-Plugin über setTimeout oder setInterval zu verwenden?
Spender
2
Ich würde sagen, dass das Herunterladen und Anhängen eines JQuery-Plugins weniger einfach ist als die einfache Verwendung von setTimeout.
Nathan Ridley
1
Ich denke nicht, dass dies notwendigerweise eine schlechte Sache ist, aber da es selten vorkommt, dass ich jemals Timer in meinem Code verwende, überwiegt es die Kosten nicht, wenn ich dieses Plugin für diese paar Male habe (sprich: zusätzlicher Code, Aufblähen). Wenn Sie viel Code geschrieben haben, der Timer verwenden musste, und jQuery verwendet haben, kann ich sehen, warum dieses Plugin sehr nützlich ist, um die jQuery-Syntax
Jason Bunting
0

wir können direkt verwenden

$('#selector').delay(5000).fadeOut('slow');
subindas pm
quelle
0
<script>
      $(function() {
      $(".hide-it").hide(7000);
    });              
</script>

<div id="hide-it">myDiv</div>
Ch UmarJamil
quelle
Bitte posten Sie nicht nur Code als Antwort, sondern geben Sie auch eine Erklärung, was Ihr Code tut und wie er das Problem der Frage löst. Antworten mit einer Erklärung sind in der Regel hilfreicher und von besserer Qualität und ziehen eher positive Stimmen an.
Mark Rotteveel