jQuery mostra per 5 secondi, quindi nascondi

145

Sto usando .showper visualizzare un messaggio nascosto dopo l'invio di un modulo riuscito.

Come visualizzare il messaggio per 5 secondi, quindi nascondere?

— josoroma
fonte

351

Puoi usare .delay()prima di un'animazione, in questo modo:

$("#myElem").show().delay(5000).fadeOut();

Se non è un'animazione, utilizza setTimeout()direttamente, in questo modo:

$("#myElem").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);

Tu fai il secondo perché .hide()normalmente non sarebbe sulla fxcoda animazione ( ) senza una durata, è solo un effetto istantaneo.

Oppure, un'altra opzione è quella di utilizzare .delay()e .queue()te stesso, in questo modo:

$("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});

— Nick Craver
fonte

1

Il suggerimento 2 ha funzionato perfettamente mostrando un'icona con un segno di spunta e usando fadeOut () invece di hide (). Bella risposta.

— Kevin Zych,

2

@wilsjd No non puoi, .delay()non funzionerà con .hide()l'elemento verrà mostrato quindi immediatamente nascosto. Vedi questo jsFiddle questo è il motivo per cui Nick ha dichiarato "Se non è un'animazione, usa direttamente setTimeout (), in questo modo: ...."

— Wesley Smith,

Hmm, mi chiedo se funzionasse due anni fa. Bello trovarlo però. Grazie per avermi reso onesto.

— wilsjd,

Ho anche implementato questo, ma quando mostro due volte msg entro 5 secondi, dovrebbe nascondere prev e riprogrammare, mentre non ripristina il ritardo del primo

— alamnaryab

18

È possibile utilizzare l'effetto sottostante per animare, è possibile modificare i valori in base alle proprie esigenze

$("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow');

— Rahul
fonte

1

$ (...). fadeIn (...). animate (...). effect non è una funzione in JQuery 2.1.3

— Dustin Charles

@DustinCharles Aggiungi jQueryUI non solo jQuery. jQuery non contiene la funzione effect () ad esempio code.jquery.com/ui/1.12.0/jquery-ui.min.js

— Rahul

0

Semplice come questo:

$("#myElem").show("slow").delay(5000).hide("slow");

— Antonio Ooi
fonte