Ukryj div po kilku sekundach

124

Zastanawiałem się, jak w jQuery mogę ukryć div po kilku sekundach? Na przykład jak wiadomości Gmaila.

Starałem się jak mogłem, ale nie mogę sprawić, by działało.

James
źródło
1
Czy po prostu ukrywanie jest wystarczające, czy chcesz, aby zniknęło?
Joel Coehoorn

Odpowiedzi:

248

Spowoduje to ukrycie elementu div po 1 sekundzie (1000 milisekund).

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>

Jeśli chcesz po prostu ukryć się bez blaknięcia, użyj hide().

swilliams
źródło
2
i bardzo dobrze pokonałeś szalonego Joela Coehoorna jednym strzałem! :)
cregox
3
@James, Na pewno nie ma różnicy w końcowym wyniku, ale przypuszczam, że implementacja przy użyciu .delay()jest bardziej „natywna” i elegancka jQuery.
Paul T. Rawkeen,
można zastąpić .fadeOut('fast')z .hide()do natychmiastowej ukryć div.
Raptor,
90

Możesz spróbować .delay()

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

wywołaj div, ustaw czas opóźnienia w milisekundach i ustaw właściwość, którą chcesz zmienić, w tym przypadku użyłem .fadeOut (), aby można było go animować, ale możesz również użyć .hide ().

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

peter punk
źródło
7
Jest to lepsze, ponieważ nie muszę używać setTimeout, a kod jest łatwiejszy do odczytania.
Marek Bar
12

jquery oferuje różne metody ukrywania elementu div w określonym czasie, które nie wymagają konfigurowania i późniejszego czyszczenia lub resetowania liczników czasu lub innych programów obsługi zdarzeń. Oto kilka przykładów.

Pure hide, sekundowe opóźnienie

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

Czysta skóra, bez opóźnienia

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

Animowana skóra

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

znikną

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

Ponadto metody mogą przyjmować nazwę kolejki lub pełnić funkcję drugiego parametru (w zależności od metody). Dokumentację wszystkich powyższych wezwań i innych powiązanych z nimi wezwań można znaleźć tutaj: https://api.jquery.com/category/effects/

Robert Mauro
źródło
10

Jest na to naprawdę prosty sposób.

Problem polega na tym, że .delay tylko animacje efektów, więc to, co musisz zrobić, to sprawić, by .hide () działał jak animacja, dając jej czas trwania.

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

Dając mu ładny krótki czas, wydaje się być natychmiastowy, tak jak zwykła funkcja .hide.

Oisin Lavery
źródło
3

Użycie licznika czasu jQuery umożliwia również przypisanie nazwy do liczników czasu, które są dołączone do obiektu. Możesz więc dołączyć kilka timerów do obiektu i zatrzymać każdy z nich.

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

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

Funkcja eval (i jej pochodne, Function, setTimeout i setInterval) zapewniają dostęp do kompilatora JavaScript. Czasami jest to konieczne, ale w większości przypadków wskazuje na obecność wyjątkowo złego kodu. Funkcja eval jest najczęściej wykorzystywaną funkcją JavaScript.

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

kamaci
źródło
2

Prawdopodobnie najłatwiejszym sposobem jest użycie wtyczki timerów. http://plugins.jquery.com/project/timers, a następnie zadzwoń na coś takiego

$(this).oneTime(1000, function() {
    $("#something").hide();
  });
stymulanty
źródło
1
Czy jest jakiś nieodparty powód, aby używać wtyczki timerów zamiast setTimeout lub setInterval?
wydający
2
Powiedziałbym, że pobranie i dołączenie wtyczki jquery jest mniej łatwe niż zwykłe użycie setTimeout.
Nathan Ridley
1
Nie sądzę, żeby to koniecznie było złe, ale ponieważ rzadko używam timerów w moim kodzie, posiadanie tej wtyczki (czytaj: dodatkowy kod, nadęty) przez te kilka razy nie przeważa kosztów. Jeśli pisałeś dużo kodu wymagającego użycia timerów i korzystałeś z jQuery, rozumiem, dlaczego ta wtyczka byłaby bardzo przydatna, aby zachować składnię jQuery ...
Jason Bunting
0

możemy bezpośrednio użyć

$('#selector').delay(5000).fadeOut('slow');
subindas pm
źródło
0
<script>
      $(function() {
      $(".hide-it").hide(7000);
    });              
</script>

<div id="hide-it">myDiv</div>
Ch UmarJamil
źródło
Nie wysyłaj tylko kodu jako odpowiedzi, ale także wyjaśnij, co robi Twój kod i jak rozwiązuje problem. Odpowiedzi z wyjaśnieniem są zwykle bardziej pomocne i lepszej jakości oraz częściej przyciągają głosy za.
Mark Rotteveel