Скрыть div через несколько секунд

Question

Мне было интересно, как в jquery я могу скрыть div через несколько секунд?Например, сообщения Gmail.

Я старался изо всех сил, но не смог заставить его работать.

Answer 1

Это скроет div через 1 секунду (1000 миллисекунд).

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>

Если вы просто хотите скрыться без исчезновения, используйте hide().

Answer 2

Вы можете попробовать .delay ()

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

вызовите div, установите время задержки в миллисекундах и задайте свойство, которое вы хотите изменить, в этом случае я использовал .fadeOut (), чтобы его можно было анимировать, но вы также можете использовать .hide ().

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

Answer 3

Есть очень простой способ сделать это.

Проблема в том, что .delay влияет только на анимацию, поэтому вам нужно заставить .hide() действовать как анимацию, задав ей продолжительность.

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

Если дать ей приятную короткую продолжительность, она будет выглядеть мгновенно, как и обычная функция .hide.

Answer 4

jquery предлагает множество способов скрыть div по времени, которые не требуют настройки и последующей очистки или сброса таймеров интервалов или других обработчиков событий. Вот несколько примеров.

Чистая шкура, задержка в одну секунду

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

Чистая шкура, без задержки

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

Анимированная шкура

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

затухание

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

Кроме того, методы могут принимать имя очереди или функцию в качестве второго параметра (в зависимости от метода). Документацию по всем вышеуказанным и другим связанным вызовам можно найти здесь: https://api.jquery.com/category/effects/

Answer 5

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

От http://james.padolsey.com/javascript/jquery-delay- плагин /

(разрешает цепочку методов)

Answer 6

Использование таймера jQuery также позволит вам иметь имя, связанное с таймерами, которые прикреплены к объекту. Таким образом, вы можете прикрепить несколько таймеров к объекту и остановить любой из них.

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

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

Функция eval (и ее родственники, Function, setTimeout и setInterval) предоставляют доступ к компилятору JavaScript. Иногда это необходимо, но в большинстве случаев это указывает на наличие крайне плохого кодирования. Функция eval - наиболее часто используемая функция JavaScript.

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

Answer 7

Вероятно, самый простой способ - использовать плагин таймеров http://plugins.jquery.com/project/timers и затем вызывайте что-то вроде

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

Answer 8

мы можем напрямую использовать

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