В JQuery Установите задержку исчезать или исчезать сразу по клику

Question

Я пытаюсь исправить скрипт для всплывающего уведомления.Я не хочу, чтобы всплывающее окно исчезало через X секунд или исчезало, когда пользователь нажимал на сообщение.Я могу заставить оба эффекта работать по отдельности, но когда я пытаюсь объединить их, fadeOut работает.Это мой код:

function notify(data, type) {
 switch(type) {
 case "success":
  $('#notify').html(data)
  .removeAttr("style")
  .addClass('notifySuccess')
  .click(function() {
$("#notify").fadeOut();
  })
  .delay(5000).fadeOut();
break;
 case "error":
  $('#notify').html(data)
  .removeAttr("style")
  .addClass('notifyFailure')
  .click(function() {
$("#notify").fadeOut();
  })
  .delay(5000).fadeOut();
break;
}
}

Answer 1

Вам нужно .stop(), чтобы убрать задержку из очереди, например:

function notify(data, type) {
 switch(type) {
 case "success":
  $('#notify').html(data)
  .removeAttr("style")
  .addClass('notifySuccess')
  .click(function() {
    $("#notify").stop(true, true).fadeOut();
  })
  .delay(5000).fadeOut();
break;
 case "error":
  $('#notify').html(data)
  .removeAttr("style")
  .addClass('notifyFailure')
  .click(function() {
    $("#notify").stop(true, true).fadeOut();
  })
  .delay(5000).fadeOut();
break;
}
}

Кроме того, если у вас есть только success и error для типов, вы можете значительно сократить это, например так:

function notify(data, type) {
 $('#notify').html(data)
   .removeAttr("style")
   .addClass(type == 'success' ? 'notifySuccess' : 'notifyFailure')
   .delay(5000).fadeOut()
   .click(function() {
     $(this).stop(true, true).fadeOut();
   });
 }

Answer 2

попробуйте поставить .stop ();

.click(function() {
    $("#notify").stop(true,true).fadeOut(); // also in this part, you may change $("#notify") to $(this)
})