JQuery: append() object, remove() с задержкой()

что с этим связано?

$('body').append("<div class='message success'>Upload successful!</div>");
$('.message').delay(2000).remove();

Я хочу добавить сообщение об успешном завершении в свой html-документ, но только для 2сек. После этого div должен быть удален снова.

Что я здесь делаю неправильно?

рассматривает

Ответы

Ответ 1

Используя setTimeout() напрямую (.delay() использует внутренне) проще, поскольку .remove() не является функцией в очереди, в целом она должна выглядеть следующим образом:

$('body').append("<div class='message success'>Upload successful!</div>");
setTimeout(function() {
  $('.message').remove();
}, 2000);

Здесь вы можете попробовать здесь.

.delay() для очереди анимации (или любой другой), чтобы использовать ее, вам нужно сделать что-то вроде:

$("<div class='message success'>Upload successful!</div>").appendTo('body')
  .delay(2000).queue(function() { $(this).remove(); });

Что работает, здесь... но это просто излишний и ужасно неэффективный, ради цепочки IMO. Как правило, вам также придется вызывать dequeue или следующую функцию, но так как вы все равно удаляете элемент...

Ответ 2

Я думаю, что правильный способ сделать это - использовать метод очереди jQuery:

    $("<div class='message success'>Upload successful!</div>")
        .appendTo('body')
        .delay(2000)
        .queue(function() {
            $(this).remove();
        });

Ответ 3

Возможно, я использую устаревший jQuery, но ни один из методов, предложенных в других ответах, не работает для меня. Согласно http://api.jquery.com/delay/, задержка для анимационных эффектов.

Использование setTimeout(), однако, прекрасно работает для меня:

$('body').append("<div class='message success'>Upload successful!</div>"); 
setTimeout(function(){
    $(".message").remove();
}, 2000);

Ответ 4

И только для ударов вы можете сделать следующее, используя задержку:

$('body').append("<div class='message success'>Upload successful!</div>");
$('.message').show('fast').delay(2000).hide('fast')
$('.message').remove();