jQuery: объект append (), удалить его с помощью delay ()

Question

что с этим не так?

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

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

что я тут не так делаю?

regards

Answer 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(); });

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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