jQuery 动画队列

发布于 2024-10-05 17:53:09 字数 377 浏览 4 评论 0 原文

我有一条错误消息，显示值何时错误。并使用 3 秒的 setTimeout 消息淡出。问题是，当消息第一次显示并等待 3 秒，此时用户再次单击“提交”，事件会再次触发。第一条消息消失，第二条消息也消失。这是显示消息的代码：

function showMSG(txt,type){
  $('.msg .text').html(txt);
  $('.msg').fadeIn(300);
  $('.msg img').attr({'src':'images/'+(type?'msgDone.jpg':'msgError.jpg')});
  setTimeout(function(){$('.msg').fadeOut(300);},300);
}

请帮忙提前致谢

原文

I have an error message that shows when a value is wrong. and using a setTimeout of 3 seconds the message fades out. The problem is when the message shows first time and waits for 3 seconds and at that moment the user clicks submit again the event fires again. the first message fades and fades also the second message.
here is the code of show message:

function showMSG(txt,type){
  $('.msg .text').html(txt);
  $('.msg').fadeIn(300);
  $('.msg img').attr({'src':'images/'+(type?'msgDone.jpg':'msgError.jpg')});
  setTimeout(function(){$('.msg').fadeOut(300);},300);
}

Please any help
thanks in advance

分享到QQ

分享到微博

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

发布评论

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

她如夕阳 2024-10-12 17:53:31

您需要将超时分配给变量，并确保在设置新超时之前尚未设置超时。

var timeout = null;

函数 showMSG(txt,类型) {
    如果（超时！== null）clearTimeout（超时）；
    $('.msg.text').html(txt);
    $('.msg').fadeIn(300);
    $('.msg img').attr({'src':'images/'+(type?'msgDone.jpg':'msgError.jpg')});
    超时 = setTimeout(function(){$('.msg').fadeOut(300);},300);
}

You need to assign the timeout to a variable and make sure a timeout is not already set before setting a new one.

var timeout = null;

function showMSG(txt,type) {
    if (timeout !== null) clearTimeout(timeout);
    $('.msg .text').html(txt);
    $('.msg').fadeIn(300);
    $('.msg img').attr({'src':'images/'+(type?'msgDone.jpg':'msgError.jpg')});
    timeout = setTimeout(function(){$('.msg').fadeOut(300);},300);
}

回复收藏 0 原文

稚气少女 2024-10-12 17:53:26

编辑澄清的问题：在这种情况下，您需要处理自己的超时并停止旧动画（而不是使用 .delay() ，您无法控制），setTimeout() 返回一个计时器 ID，您可以将其设置为 3 秒（3000ms 而不是 300ms！），当触发下一条消息时，停止该计时器带有 clearTimeout() 的计时器。

另外，您还需要将其与 .stop() 结合起来清除淡入淡出队列，如下所示：

var timer;
function showMSG(txt,type){
  clearTimeout(timer);
  $('.msg .text').html(txt);
  $('.msg img').attr({'src':'images/'+(type?'msgDone.jpg':'msgError.jpg')});
  var msg = $('.msg').stop().fadeIn(300);
  timer = setTimeout(function() { msg.fadeOut(300); }, 3000);
}

Edit for clarified question: In this case you'll need to handle your own timeout and stop the old animation (rather than using .delay() that you can't control), setTimeout() returns a timer ID that you can set for 3 seconds (3000ms not 300ms!) and when the next message is triggered, stop the timer with clearTimeout().

Also, you'll want to combine this with .stop() to clear the fade queue, like this:

var timer;
function showMSG(txt,type){
  clearTimeout(timer);
  $('.msg .text').html(txt);
  $('.msg img').attr({'src':'images/'+(type?'msgDone.jpg':'msgError.jpg')});
  var msg = $('.msg').stop().fadeIn(300);
  timer = setTimeout(function() { msg.fadeOut(300); }, 3000);
}

回复收藏 0 原文

~没有更多了~