Question

我有一个函数，当点击显示一个div，然后等待一秒，调用一些ajax，显示结果，然后等待一秒，然后再次隐藏......

这一切似乎都有效，除了最后的隐藏部分。

我的代码如下所示：

  $('#wrap').slideDown('fast').delay(1000,function(){

  $.ajax({
    type: 'POST',
    url: '/stuff.php',
    cache: false,
    success: function(data) {

      $('#wrap').show().delay(1000,function(){

        $('#wrap').fadeOut('slow'); 

      });

    }
  });

}）;

我在这里缺少什么？在行中看起来非常简单：

$('#wrap').show().delay(1000,function() { ///// }

隐藏#wrap的回调函数应该运行。为什么不呢？

除此之外，我正在寻找一些机械风格的动画，其中由slideDown发生，然后一秒钟后，ajax被执行...然后是淡出...但这一切似乎都发生了即使我在那里有那些delay（）函数，所以一下子。我试图乱用queue（）函数，但它似乎逃避了我的下脑。

Answer 1

我希望这可能会有所帮助

$('#yourClickableElement').click(function() {
  $('#wrap').slideDown(1000, function() {
    $.ajax({
      type: 'POST',
      url: '/stuff.php',
      cache: false,
      success: function(data) {
        $("#wrap").show(1000).fadeOut("slow");
      }
    });    
  });
});

Answer 2

“隐藏#wrap的回调函数应该运行。为什么不呢？”

因为delay()^[docs]方法不接受回调。

$('#wrap').slideDown('fast')
          .delay(1000)
          .queue( function ( nxt ) {
              $.ajax({
                 type: 'POST',
                 url: '/stuff.php',
                 cache: false,
                 success: function (data) {
                     $('#wrap').show().delay(1000).fadeOut('slow');
                 }
              });
              nxt();
          });

这使用queue()^[docs]方法，以便您可以链接AJAX请求

点击，显示一个div，等一下，加载一些ajax，等一下，然后隐藏它们？

2 个答案: