Question

有人能弄清楚为什么fadein和fadeout不起作用？发生的事情是附加的div显示并几乎立即被删除。我有一个2500的延迟，这应该保持div足够长的时间来阅读它。

我是JQuery的新手，所以如果有更好的方法来构建它，我很乐意听到更好或更清晰的方法。

  $.ajax({
    type: "POST",
    url: "2.php",
    data: dataString,
    dataType: 'json',
    success: function(data)
    {
      var div = $('<div>').attr('id', 'message').html(data.message).css('position', 'absolute').css('top', '300px').css('left', '1000px');
      if(data.success == 0)
      {
        $(div).addClass('ajax-error');
      }
      else
      {
        $(div).addClass('ajax-success');
      }

      $('body').append(div);
      $("#message").fadeIn(2500, function() {
        $(this).fadeOut(300, function() {
          $(this).remove();
        });
      });
    }
  });

这是我用来进行验证的代码块，正如我所期望的那样，通过淡入淡出来读取错误然后逐渐消失。我所做的只是将fadein和out代码块复制到我的ajax块中。</ p>

    var div = $('<div>').attr('id', 'error').html('Cannot Be Blank').hide();
    $(div).addClass('ajax-error').css('position', 'absolute').css('top', '300px').css('left', '1000px');
    $('body').append(div);
    $("#error").fadeIn(2500, function() {
      $(this).fadeOut(300, function() {
        $(this).remove();
      });
    });
    return false;

Answer 1

$("<div>")
    .attr( "id", "message" )
    .html( data.message )
    .css({
        "position": "absolute",
        "top": "300px",
        "left": "1000px",
        "display": "none"
    })
    .addClass( data.success ? "ajax-success" : "ajax-error" )
    .appendTo( "body" )
    .fadeIn()
    .delay( 2500 )
    .fadeOut();

我在CSS声明中添加了display：none。您应该首先隐藏它，以便它可以正确淡入。

但是，如果它对您不起作用，可能是因为您使用的是旧版本的jQuery。 delay（）方法在1.4中引入。

Answer 2

2500不是延迟，它是fadeIn完成所需的时间长度。发生的事情是，一旦它消失，就会执行'完整'回调函数，使其在300毫秒内淡出。

如果你希望它保持2.5秒而不是消失，你可以在回调函数中使用setTimeout。像

这样的东西

   $("#message").fadeIn(400, function() {
     setTimeout(function(){
        $("#message").fadeOut(300, function() {$("#message").remove();})
        },2500);
   });

我会发布我的测试页面，只是为了说明这个方法。

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
     $(document).ready(function(){
        $("#message").fadeIn(400, function() {
          setTimeout(function(){
              $("#message").fadeOut(300, function() {
              $("#message").remove();})},2500);
              });
            });
    </script>
  </head>
  <body>
    <div id='message'>
      Message!!
      <br>
      <img src='http://static.adzerk.net/Advertisers/2456.jpg'>
    </div>
  </body>
</html>

使用$.delay，淡出部分可以是

$("#message").fadeIn(400, function() {
  $(this).delay(2500).fadeOut(300,function(){$(this).remove()});});
});

fadein fadeout忽略了时间延迟

2 个答案: