0

Код element.fadeOut(1000).remove() - требуется скрыть элемент анимацией, а только затем удалить. Как это сделать? Пример http://codepen.io/anon/pen/yeGygx

$(function(){
  $('input').on('click', function(){
    $('div').fadeOut(1000).remove();
  })
})

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

Правильно ли я понимаю, что методы stop(), clearQueue() применимы только к методам анимации?

2 ответа 2

3

Используйте callback функцию:

$(function(){
  $('input').on('click', function(){
    $('div').fadeOut(1000, function(){$(this).remove();});
  });
});
6
  • 1
    Ну эт вы загнули все дивы удалять по окончании анимации только одного :)
    – Grundy
    10 фев 2016 в 9:43
  • Хотя, с другой стороны автор все дивы и выбирает, непонятно...
    – Grundy
    10 фев 2016 в 9:45
  • @Grundy, ну так уж в вопросе был код реализован, мало ли) 10 фев 2016 в 9:45
  • @СебастьянПерейро, Только this не строкой передавайте :)
    – Grundy
    10 фев 2016 в 9:49
  • @Grundy, само собой, это исключительно опечатка) 10 фев 2016 в 9:50
3

В функцию jQuery.fadeOut можно передать второй параметр - функцию которая выполнится когда анимация закончится.

Например

$(function(){
  $('input').on('click', function(){
    $('div').fadeOut(1000,function(){$(this).remove();});
  })
});

Кроме того начиная с версии 1.6 можно использовать promise

$(function(){
  $('input').on('click', function(){
    $('div').fadeOut(1000).promise().done(function(){
        this.remove();//this - jQuery object
    })
  })
});
7
  • Промисы – спортивно, модно, современно! Но как-то не аккуратненько ) Upvote за promise, тем не менее.
    – Sergiks
    10 фев 2016 в 9:53
  • @Sergiks, а почему не аккуратненько? :-) вроде красиво так сплошные цепочки вызовов, а не колбэки :)
    – Grundy
    10 фев 2016 в 9:53
  • «букв» фактически стало больше. И если захочется ещё и .fail() и прочие предусмотреть, получится какой-то паровоз.
    – Sergiks
    10 фев 2016 в 9:58
  • @Sergiks, хм :-) fail у анимации? :-) в любом случае, как отмечено выше: стильно, модно, молодежно :-D
    – Grundy
    10 фев 2016 в 10:00
  • Кнопка «я передумал», вызывающая .stop(), например.
    – Sergiks
    10 фев 2016 в 10:01

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.