2010-09-07 2 views
34

что с этим?jQuery: добавить() объект, удалить() с задержкой()

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

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

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

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

ответ

86

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

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

You can give it a try here.

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

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

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

+0

+1 всегда содержит хорошие ответы на jquery, аналогичные тем, которые вы предоставили f или меня раньше ... –

+0

@ Shog9 - Чтобы быть полностью * точным, это не просто * анимация, это просто * по умолчанию * анимация очереди 'fx' работает, но это может быть любая очередь, если передано имя :) –

+0

Woops, удалил этот комментарий, так как вы обновили свой ответ. Но вы правы, поддержка очереди довольно универсальна и может быть использована для других вещей - анимация просто по умолчанию. – Shog9

2

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

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

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

Не передавайте строку 'setTimeout()' !, передайте анонимную функцию :) –

0

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

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

Это почти наверняка удалит элемент до того, как он даже будет показан ... – Shog9

+0

@ Shog9. Ты прав. Я просто работал в jsfiddle ... должно быть, был другим фрагментом. Weird. – Strelok

+0

Случалось, чтобы наткнуться на этот вопрос и ответить при поиске setTimeout и увидел, что вы все еще активны. Не знаю, можете ли вы сделать это еще в 2010 году, но теперь вы можете использовать функцию в качестве второго параметра в вашей функции hide. Так что просто для ударов вы можете делать '$ ('. Message'). Show ('fast'). Delay (2000) .hide ('fast', function() {$ ('. Message'). Remove()}); '=) – timo

4

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

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

 Смежные вопросы

  • Нет связанных вопросов^_^