Ukryj div po kilku sekundach

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.

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

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/

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/

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.

$.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);
}

Od http://james.padolsey.com/javascript/jquery-delay-plugin/

(Pozwala na łańcuch metod)

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

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();
  });

możemy bezpośrednio użyć

$('#selector').delay(5000).fadeOut('slow');

<script>
      $(function() {
      $(".hide-it").hide(7000);
    });              
</script>

<div id="hide-it">myDiv</div>