Wie kann man mit jQuery eine Pause einlegen, bevor man ein Element ausblendet?

Question

Ich möchte eine Erfolgsmeldung auf meiner Seite blinken lassen.

Ich verwende die jQuery fadeOut Methode zum Ausblenden und anschließenden Entfernen des Elements.Ich kann die Dauer erhöhen, damit es länger hält, aber das sieht seltsam aus.

Ich möchte, dass das Element fünf Sekunden lang angezeigt wird, dann schnell ausgeblendet wird und schließlich entfernt wird.

Wie können Sie dies mit jQuery animieren?

Answer 1

Das neue delay() Funktion in jQuery 1.4 sollte den Zweck erfüllen.

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();

Answer 2

verwenden setTimeout(function(){$elem.hide();}, 5000);

Wo $elem ist das Element, das Sie ausblenden möchten, und 5000 ist die Verzögerung in Millisekunden.Sie können tatsächlich jede Funktion innerhalb des Aufrufs verwenden setTimeout(), dieser Code definiert der Einfachheit halber nur eine kleine anonyme Funktion.

Answer 3

Während der Ansatz von @John Sheehan funktioniert, stoßen Sie auf das jQuery fadeIn/fadeOut ClearType-Fehler im IE7.Persönlich würde ich mich für @John Millikin's entscheiden setTimeout() Ansatz, aber wenn Sie auf einen reinen jQuery-Ansatz setzen, ist es besser, eine Animation auf einer Nicht-Opazitätseigenschaft auszulösen, z. B. einem Rand.

var left = parseInt($('#element').css('marginLeft'));
$('#element')
    .animate({ marginLeft: left ? left : 0 }, 5000)
    .fadeOut('fast');

Sie können etwas sauberer vorgehen, wenn Sie wissen, dass Ihre Marge ein fester Wert ist:

$('#element')
    .animate({ marginLeft: 0 }, 5000)
    .fadeOut('fast');

BEARBEITEN:Es sieht so aus jQuery FxQueues-Plug-in macht genau das, was Sie brauchen:

$('#element').fadeOut({
    speed: 'fast',
    preDelay: 5000
});

Answer 4

Für einen reinen jQuery-Ansatz ist dies möglich

$("#element").animate({opacity: 1.0}, 5000).fadeOut();

Es ist ein Hack, aber es erfüllt seinen Zweck

Answer 5

var $msg = $('#msg-container-id');
$msg.fadeIn(function(){
  setTimeout(function(){
    $msg.fadeOut(function(){
      $msg.remove();
    });
  },5000);
});

Answer 6

In Anlehnung an den Kommentar von dansays scheint Folgendes perfekt zu funktionieren:

$('#thing') .animate({dummy:1}, 2000) .animate({ etc ... });

Answer 7

Update für 1.6.2

Die Antwort von Nathan Long führt dazu, dass das Element ohne Verzögerung abspringt oder fadeOut.

Das funktioniert:

$('#foo').delay(2000).fadeOut(2000);

Answer 8

Die Antwort von dansays funktioniert bei mir einfach nicht.Aus irgendeinem Grund, remove() wird sofort ausgeführt und das Div verschwindet, bevor Animationen stattfinden.

Das Folgende funktioniert jedoch (durch Weglassen von remove() Methode):

$('#foo').fadeIn(500).delay(5000).fadeOut(500);

Es macht mir nichts aus, wenn es versteckte DIVs auf der Seite gibt (mehr als ein paar sollten es sowieso nicht sein).