javascript - Jquery淡入文本一段时间

Question

在我的应用程序中，我有一个脚本可以告诉某人何时上线或下线。content = name+' went offline'我输入了是否有人通过或反之亦然上线/下线的文本。然后，我在函数调用结束时将该文本放入 div 中：$('#new').text(content);

问题在于淡出，总而言之，它并没有真正起作用。我一直在尝试玩弄它。这是我到目前为止所拥有的：

$('#new').text(content);
$('#new').fadeIn('slow', function() {
        setTimeout($('#new').fadeOut('slow', function() {
        $('#new').css('display', 'none');   
        }));
    });

Answer 1

display:none内部回调是不必要的，fadeOut()结束后自动将显示设置为无。

$('#new').text(content);
$('#new').fadeIn('slow', function() {
    setTimeout("$('#new').fadeOut('slow');", 2000);
});

2000 是您想要延迟的毫秒数，将其更改为更适合您的值。

正如@Pst 评论的那样，即使我个人对函数对象的问题多于代码字符串，函数对象也可能更加一致。

您也可以使用函数对象：

$('#new').text(content);
$('#new').fadeIn('slow', function() {
    setTimeout(function(){ $('#new').fadeOut('slow'); }, 2000);
});

Answer 2

您需要记住提供setTimeout在采取行动之前应该等待的持续时间。

$("#hello")
  .text(content)
  .fadeIn("slow", function(){
    setTimeout(function(){
      $("#hello").fadeOut();
    }, 2000);
  });

2000 表示 2 秒。如果您希望它保持可见更长时间，请增加此值。

功能演示：http: //jsbin.com/aciwon/edit#javascript,html

Answer 3

你在里面用这个$(document).ready()吗？如果没有，请将其放置为：

$(document).ready(function() {
    $('#new')
        .text(content)
        .fadeIn('slow', function() { 
            setTimeout(function() { $('#new').fadeOut('slow'); }, 2000); 
        });
});

此外，请务必使用 a 初始化您的元素，display: none并注意我已删除部分不必要的代码。

你的setTimeout()代码是错误的，你必须向它传递一个函数。

Answer 4

为什么不只使用延迟？

$("#new").text(content).fadeIn("slow").delay(1000).fadeOut("slow");