在jquery中设置延迟淡出或点击后立即淡出

发布于 2024-09-03 00:21:56 字数 533 浏览 1 评论 0原文

我正在尝试纠正通知弹出窗口的脚本。我不希望弹出窗口在 X 秒后淡出或在用户单击消息时淡出。我可以让这两种效果单独工作，但是当我尝试将它们组合起来时，淡出效果有效。到目前为止，这是我的代码：

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;
}
}

原文

I am trying to right a script for a notification popup. I wan't the popup to fade out after X seconds or fadeout when the user clicks on the message. I can get both effects to work individually but when I try to combine them fadeOut works. This is my code so far:

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;
}
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

删除→记忆 2024-09-10 00:21:57

尝试放置 .stop();

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

try putting .stop();

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

回复收藏 0 原文

心碎无痕… 2024-09-10 00:21:56

您需要一个 .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();
   });
 }

You need a .stop() in there to clear the delay out of the queue, like this:

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;
}
}

Also, if you only have success and error for types, you can shorten this down a great deal, like this:

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

回复收藏 0 原文

~没有更多了~