使用jQuery如何使用fadeIn、delay和fadeOut问题

Question

6

我需要使用JQuery使某些东西淡入，然后停留一秒钟，然后淡出。

我尝试过这个方法，但由于某些原因它不起作用？

$('#' + uMessage).fadeIn("fast").fadeOut("slow");  // works
$('#' + uMessage).fadeIn("fast").delay(1000).fadeOut("slow");  // fails

你有什么建议吗？我做错了什么吗？

非常感谢！！！

- James Radford

1

它在哪里失败了？它根本没有做任何事情吗？ - Stephan Muller

啊，抱歉，当我添加延迟时，它并没有淡出。 - James Radford

你是在调用.stop()还是以其他方式清空队列？ - Nick Craver

3

.delay 只能用于 jQuery 1.4 及以上版本。可能是这个原因吗？ - karim79

请在解决问题后，友好地接受正确答案。 - Stephan Muller

6个回答

3

也许可以尝试使用API中指定的回调函数来实现 FadeIn 函数。这个函数会在淡入完成后被调用。

$('#' + uMessage).fadeIn("fast", function() {
  $(this).delay(1000).fadeOut("slow");
});

- Fermin

3

延迟淡入淡出效果并不起作用。在延迟和回调后使用队列的组合有时可以解决其他情况。

这种方法最终适用于我：

$('#message').fadeIn(function() {
  window.setTimeout(function() {
    $('#message').fadeOut('slow');
  }, 2000);
});

- hallodom

1

我认为问题在于您使用的jQuery版本：

这个可以正常工作。升级到1.3.2后就出问题了。

- Stephan Muller

1

你是否正在使用jQuery 1.4+？delay()函数是在jQuery 1.4中添加的。

- Sandro

0

jQuery 官方文档指出，第二个参数不是回调函数，而是缓动样式。

$('#el').fadeOut(750,'swing',function(){
    $('#el').fadeIn();
});

所以只需将您的回调函数移动到第三个参数，一切都会正常工作。

- Lukas Liesis

尝试使用jQuery 1.3.2进行了测试，但函数未触发。 - user1380540

如果按照文档，jQuery应该会触发，请检查选择器或其他地方是否有问题。 - Lukas Liesis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sled · Accepted Answer

实际上，你的第二种方法应该是可以的，与文档相应 (http://api.jquery.com/delay/)

另一种方法可能是使用回调函数，在fadeIn完成时调用:

$('#' + uMessage).fadeIn("fast", function() { $(this).delay(1000).fadeOut("slow"); });

仅供参考

编辑：

如果您不能使用delay()方法，那么您可以尝试这个：

$('#' + uMessage).fadeIn("fast", function() { 
  c_obj = $(this);
  window.setTimeout(function() { $(c_obj).fadeOut("slow"); }, 1000); 
});