Обратный вызов .delay()

У меня есть $image, что я .fadeIn и .fadeOut, а затем .remove после .fadeOut завершается. Это мой код:

$image
   .fadeIn()
   .fadeOut(function() {
      $(this).remove();
   });

Я хочу добавить .delay после .fadeOut и .remove $image только один раз .delay. Я пробовал:

$image
   .fadeIn()
   .fadeOut()
   .delay(1000, function() {
      $(this).remove();
   });

Проблема заключается в том, что .delay не принимает функцию обратного вызова. Как я могу .remove изображение как обратный вызов .delay?

Ответы

Ответ 1

Вы можете использовать метод queue(), чтобы запланировать выполнение вашей собственной функции после завершения delay():

$image.fadeIn()
      .fadeOut()
      .delay(1000)
      .queue(function(next) {
          $(this).remove();
          next();
      });

Ответ 2

Вы всегда можете сделать это как:

$image
    .fadeIn()
    .fadeOut(function() {
        var self = this; // Not sure if setTimeout
                         // saves the pointer to this
        setTimeout(function() {
            $(self).remove();
        }, 1000)
    });

Ответ 3

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

$image
   .fadeIn()
   .fadeOut()
   .delay(1000)
   .remove()
});

Например, в следующем примере из документации:

$('#foo').slideUp(300).delay(800).fadeIn(400);

Характер исполнения очереди в очереди также указан:

... метод .delay() позволяет нам задерживать выполнение функций, которые следуют за ним в очереди. Его можно использовать со стандартной очереди эффектов или с пользовательской очередью. Только последующие события в очереди задерживаются; например, это не будет задерживайте формы без аргументов .show() или .hide(), которые не используют очереди эффектов.

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