为什么.fadeout()不起作用，而.hide()隐藏在jQuery中的div时工作正常

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

demo