0

下面的代码有效，但不能正常工作的是延迟进程，因为我不知道process.php需要多长时间才能响应。它总是不同的。没有确定的时间。

下面的代码可以像这样工作（除了错误的延迟）：

  1. 当我点击运行图标时，运行图标应该会消失，加载器图标应该会慢慢出现。
  2. 来自process.php的响应后，加载器图标应该会慢慢消失，成功/失败图标会慢慢出现。如果成功的话，紧接着next ( div ) 应该会慢慢出现。

谢谢

$(document).ready(function()
{
   $("#run").click(function(event)
   {
      $('#run').hide();
      $('#loader').fadeIn(1000).delay(1000);

      $.ajax(
      {
         type       : 'POST',
         url        : 'process.php',
         data       : 'user=jolly',
         dataType   : 'json',
         success    : function(response)
         {
            if(response.status == 'success')
            {
               $('#loader').delay(1000).fadeOut();
               $('#success').delay(4000).fadeIn(1000);
               $('#next').delay(4500).fadeIn(1000);
            }
            else
            {
               $('#loader').delay(1000).fadeOut();
               $('#fail').delay(4000).fadeIn(1000);
               $('#next').delay(4500).fadeIn(1000);
            }
         }
      });
   });
});


<div id="first">
   <img id="run" src="run.png" />
   <img id="loader" src="loader.png" style="display:none;" />
   <img id="success" src="success.png" style="display:none;" />
   <img id="fail" src="fail.png" style="display:none;" />
</div>
<div id="next" style="display:none;">
   ....
   ....
</div>
4

2 回答 2

2

符合你的问题吗？

$('#run').hide();
$('#loader').fadeIn(1000);

$.ajax({
  type: 'POST',
  url: 'process.php',
  data: 'user=jolly',
  dataType: 'json',
  success: function (response) {
    $('#loader').stop(true).fadeOut(function () {
      if (response.status == 'success') {
        $('#success').fadeIn(1000, function () {
          $('#next').fadeIn(1000);
        });
      } else {
        $('#fail').fadeIn(1000);
      }
    });
  }
});
于 2012-08-30T08:53:50.900 回答
2

你这样做是错的？这不是delay()预期的目的，您有回调来处理此行为：

$(function() {
    $("#run").on('click', function() {
        $(this).hide();
        $('#loader').fadeIn(1000);

        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: {user: 'jolly'},
            dataType: 'json'
        }).done(function(data) {
            $('#loader').fadeOut(1000, function() {
                $('#success').fadeIn(1000, function() {
                    $('#next').fadeIn(1000);
                });
            });
        }).fail(function() {
            $('#loader').fadeOut(1000, function() {
                $('#success').fadeIn(1000, function() {
                    $('#fail').fadeIn(1000);
                });
            });
        });
    });
});​

此外，无需检查response.status，jQuery 对两者都有可用的回调。

您也可以将 Ajax 函数放置在加载程序的初始淡入的回调中，但您真正要做的只是延迟向用户显示数据，这总是一件坏事。

于 2012-08-30T08:54:41.220 回答