Wie pausieren Sie, bevor Sie ein Element mit jQuery ausblenden?

Question

Ich möchte eine Erfolgsmeldung auf meiner Seite blinken.

Ich benutze die Methode jQuery fadeOut, um zu verblassen und dann das Element zu entfernen. Ich kann die Dauer erhöhen, damit sie länger hält, aber das sieht seltsam aus.

Ich würde gerne das Element für fünf Sekunden angezeigt werden, dann schnell verblassen und schließlich entfernt werden.

Wie können Sie dies mit jQuery animieren?

Answer 1

Die neue delay() Funktion in jQuery 1.4 sollte den Trick machen.

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

Answer 2

Verwendung 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 zu setTimeout() verwenden, dieser Code definiert nur eine kleine anonyme Funktion der Einfachheit halber.

Answer 3

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

Answer 4

Für einen reinen Ansatz jQuery können Sie

tun

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

Es ist ein Hack, aber es macht den Job

Answer 5

Während @ John Sheehan-Ansatz funktioniert, können Sie in die jQuery fadeIn/fadeOut ClearType glitch in IE7 laufen . Persönlich würde ich mich für @John Millikins setTimeout() Ansatz entscheiden, aber wenn Sie auf einen reinen jQuery-Ansatz eingestellt sind, ist es besser, eine Animation auf einer Nicht-Opazitätseigenschaft wie einem Rand auszulösen.

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

Sie können etwas sauberer sein, wenn Sie Ihre Marge kennen einen festen Wert zu sein: Ist es sieht aus wie die jQuery FxQueues plug-in, was Sie brauchen:

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

EDIT

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

Answer 6

Nach dem Kommentar von Dansays scheint folgendes perfekt zu funktionieren:

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

Answer 7

dansays's Antwort funktioniert einfach nicht für mich. Aus irgendeinem Grund läuft remove() sofort und das Div verschwindet, bevor irgendwelche Animationen passieren.

Folgende Werke jedoch (durch die remove() Verfahren Weglassen):

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

ich nichts dagegen, wenn es DIVs auf der Seite versteckt sind (es sollte nicht mehr als ein paar sowieso).

Answer 8

Update für 1.6.2

Nathan Long Antwort wird das Element verursachen unverzüglich zu gehorchen abspringt oder fadeOut.

Dies funktioniert:

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