jquery - 为什么 .fadeOut() 不起作用，但在 jquery 中隐藏附加的 div 时 .hide() 工作正常？

Question

我想显示一个 div 并在几秒钟后将其删除。就是这么简单。所以在我的html中我有：<div id="msg"></div>

我有这个功能：

function showWarning(text) {
            $('<div>'+text+'</div>').appendTo('#msg').hide().fadeIn('fast').delay(1000).queue(function() {
                $(this).fadeOut();
        });
    }

我找不到任何方法来完成这项工作。fadeOut()被调用但屏幕上没有任何反应。如果我改变fadeOut()它hide()工作正常。但是......如果我尝试hide(500)那么它将无法正常工作。

我认为这是微不足道的-初学者错误-但我找不到。

谢谢

Answer 1

fadeIn()不能完成运行，在执行淡出之前使用回调函数。

$('<div>'+text+'</div>').appendTo('#msg').hide().fadeIn('fast', function () {
    $(this).fadeOut();
});

Answer 2

function showWarning(text) {
    $('<div />', {text: text}).fadeIn('fast', function() {
        $(this).delay(1000).fadeOut(600);
    }).appendTo('#msg');
}

小提琴

Answer 3

像这样：http: //jsfiddle.net/b7EV8/

function showWarning(text) {
    $('<div id="msgtext">' + text + '</div>').appendTo('#msg').hide().fadeIn('fast', function() {
        $('#msgtext').delay(1000).fadeOut();
    });
}

showWarning('hello')

Answer 4

function showWarning(text) {
  $('<div>').text(text).appendTo('#msg').hide().fadeTo(400,1,function(){
      $(this).delay(1000).fadeOut();
  });
}

演示