Как вы делаете паузу перед вытеснением элемента с помощью jQuery?

Я хочу сделать сообщение с успешным сообщением на моей странице.

Я использую метод jQuery fadeOut для выцветания и удаления элемента. Я могу увеличить продолжительность, чтобы сделать это дольше, однако это выглядит странно.

Я бы хотел, чтобы элемент отображался в течение пяти секунд, затем быстро исчезал и, наконец, удалялся.

Как вы можете анимировать это с помощью jQuery?

Ответы

Ответ 1

Новая функция delay() в jQuery 1.4 должна сделать трюк.

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();

Ответ 2

использовать setTimeout(function(){$elem.hide();}, 5000);

Где $elem - это элемент, который вы хотите скрыть, а 5000 - это задержка в миллисекундах. Фактически вы можете использовать любую функцию в вызове setTimeout(), этот код просто определяет небольшую анонимную функцию для простоты.

Ответ 3

Пока работает подход @John Sheehan, вы запускаете jQuery fadeIn/fadeOut ClearType сбой в IE7. Лично я бы выбрал подход @John Millikin setTimeout(), но если вы настроены на чистый подход jQuery, лучше спровоцировать анимацию на свойство без непрозрачности, например на маржу.

var left = parseInt($('#element').css('marginLeft'));
$('#element')
    .animate({ marginLeft: left ? left : 0 }, 5000)
    .fadeOut('fast');

Вы можете быть немного чище, если знаете, что ваша маржа является фиксированным значением:

$('#element')
    .animate({ marginLeft: 0 }, 5000)
    .fadeOut('fast');

EDIT: похоже, что плагин jQuery FxQueues делает именно то, что вам нужно:

$('#element').fadeOut({
    speed: 'fast',
    preDelay: 5000
});

Ответ 4

Для чистого jQuery-подхода вы можете сделать

$("#element").animate({opacity: 1.0}, 5000).fadeOut();

Это взлом, но он выполняет работу

Ответ 5

var $msg = $('#msg-container-id');
$msg.fadeIn(function(){
  setTimeout(function(){
    $msg.fadeOut(function(){
      $msg.remove();
    });
  },5000);
});

Ответ 6

Следуя комментарию dansays, кажется, что все работает отлично:

$('#thing') .animate({dummy:1}, 2000) .animate({ etc ... });

Ответ 7

Ответ dansays просто не работает для меня. По какой-то причине remove() запускается немедленно, и div исчезает до того, как произойдут какие-либо анимации.

Однако следующие работы (путем исключения метода remove()):

$('#foo').fadeIn(500).delay(5000).fadeOut(500);

Я не против, если на странице есть скрытые DIVs (их должно быть не так много).

Ответ 8

Обновление для 1.6.2

Ответ Nathan Long заставит элемент выскакивать, не подчиняясь задержке или fadeOut.

Это работает:

$('#foo').delay(2000).fadeOut(2000);