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


124

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

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


1
Достаточно ли хорошо спрятаться или вам нужно, чтобы оно исчезло?
Джоэл Кохорн

Ответы:


248

Это скроет 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().


2
и ты очень хорошо победил сумасшедшего Джоэла Кохорна одним выстрелом! :)
cregox

3
@James, в конечном результате разницы точно нет, но полагаю, что реализация с использованием .delay()более "родная" и элегантная для jQuery.
Пол Т. Роукин,

вы можете заменить .fadeOut('fast')на, .hide()чтобы мгновенно скрыть div.
Raptor

90

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

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

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

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


7
Это лучше, потому что мне не нужно использовать setTimeout, а код легче читать.
Марек Бар

12

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/


10

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

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

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

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



3

Использование таймера 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


2

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

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

1
Есть ли веская причина использовать плагин таймеров вместо setTimeout или setInterval?
Спендер

2
Я бы сказал, что загрузить и прикрепить плагин jquery менее просто, чем просто использовать setTimeout.
Натан Ридли

1
Я не думаю, что это обязательно плохо, но поскольку я редко использую таймеры в своем коде, наличие этого плагина (читай: дополнительный код, раздувание) в те несколько раз не перевешивает затрат. Если бы вы писали много кода, который требовал использования таймеров, и использовали jQuery, я могу понять, почему этот плагин было бы очень полезно сохранить с синтаксисом jQuery ...
Джейсон Бантинг,


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

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

Пожалуйста, не публикуйте только код в качестве ответа, но также объясните, что делает ваш код и как он решает проблему вопроса. Ответы с объяснением обычно более полезны и качественнее, и с большей вероятностью получат положительные отзывы.
Марк Роттевил,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.