Birkaç saniye sonra div'i gizle

Merak ediyordum, jquery'de birkaç saniye sonra bir div'i nasıl gizleyebilirim? Örneğin Gmail'in mesajları gibi.

Elimden gelenin en iyisini denedim ama işe yaramadı.

Bu, div'i 1 saniye (1000 milisaniye) sonra gizleyecektir.

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>

Sadece solmadan saklanmak istiyorsanız, kullanın hide().

Deneyebilirsin .delay()

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

div çağrısı gecikme süresini milisaniye cinsinden ayarlayın ve değiştirmek istediğiniz özelliği ayarlayın, bu durumda animasyonlu olması için .fadeOut () kullandım, ancak .hide () kullanabilirsiniz.

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

jquery, div'i zamanlanmış bir şekilde gizlemek için, aralık zamanlayıcılarının veya diğer olay işleyicilerinin kurulmasını ve daha sonra silinmesini veya sıfırlanmasını gerektirmeyen çeşitli yöntemler sunar. İşte birkaç örnek.

Saf saklanma, bir saniye gecikme

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

Saf saklanma, gecikme yok

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

Animasyonlu gizle

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

kaybolmak

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

Ek olarak, yöntemler bir kuyruk adı alabilir veya ikinci bir parametre olarak işlev görebilir (yönteme bağlı olarak). Yukarıdaki tüm aramalar ve diğer ilgili aramalar için belgeler burada bulunabilir: https://api.jquery.com/category/effects/

Bunu yapmanın gerçekten çok basit bir yolu var.

Sorun, .delay'in yalnızca animasyonları etkilemesidir, bu nedenle yapmanız gereken, .hide () işlevinin bir süre vererek animasyon gibi davranmasını sağlamaktır.

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

Güzel ve kısa bir süre vererek, normal .hide işlevi gibi anlık görünmektedir.

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

Gönderen http://james.padolsey.com/javascript/jquery-delay-plugin/

(Yöntemlerin zincirlenmesine izin verir)

JQuery zamanlayıcısını kullanmak, nesneye eklenen zamanlayıcılarla ilişkili bir ada sahip olmanıza da olanak tanır. Böylece bir nesneye birkaç zamanlayıcı ekleyebilir ve bunlardan herhangi birini durdurabilirsiniz.

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

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

Eval işlevi (ve onun akrabaları, Function, setTimeout ve setInterval) JavaScript derleyicisine erişim sağlar. Bu bazen gereklidir, ancak çoğu durumda aşırı derecede kötü kodlamanın varlığını gösterir. Eval işlevi, JavaScript'in en çok yanlış kullanılan özelliğidir.

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

Muhtemelen en kolay yol, zamanlayıcı eklentisini kullanmaktır. http://plugins.jquery.com/project/timers ve ardından şöyle bir şey arayın:

$(this).oneTime(1000, function() {
    $("#something").hide();
  });

doğrudan kullanabiliriz

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

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

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