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

Question

Я хотел бы высказать сообщение об успехе на своей странице.

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

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

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

Answer 1

Новая функция delay() в jQuery 1.4 должна помочь.

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

Answer 2

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

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

Answer 3

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

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

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

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

РЕДАКТИРОВАТЬ : похоже, что плагин jQuery FxQueues делает именно то, что вам нужно:

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

Answer 4

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

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

Это взломать, но это делает работу

Answer 5

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

Answer 6

Следуя комментариям Дансея, кажется, что следующее работает очень хорошо:

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

Answer 7

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

От ответа Натана Лонга элемент выскочит без задержки или fadeOut.

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

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

Answer 8

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

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

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

Я не против, если на странице есть скрытые DIV (в любом случае их должно быть не больше, чем несколько).