2

コールバックを使用して最初の効果が完了した後に2番目の効果が実行されるように、2つの効果を連鎖させる方法を知っています。そのように;

$("#target").fadeOut('slow',function(){
   $(this).slideUp('slow');
});

したがって、これは機能し、divが上にスライドする前に最初にフェードアウトします。ajax呼び出しが成功した後、fadeOutが終了した後、slideUpを発生させたいのですが、次のコードを実行すると、ajaxリクエストがすぐに発生し、fadeOutが終了する前にslideUpになります。

$.ajax({
    /** settings **/
    beforeSend: function() {
       $("#target").fadeOut('slow');
    },
    success: function() {
       $("#target").slideUp('slow');
    },
    error: function() {
       $("#target").fadeIn('slow');
    }
});

成功コールバックでjQueryに、fadeOutが完了した後にslideUpを実行するように指示するにはどうすればよいですか。

私はこれを試しました。

 $("#target").queue(function(){
    $(this).slideUp('slow');
 });

しかし、それはうまくいきませんでした。

4

3 に答える 3

3

簡単な解決策！

var flag=false;

$.ajax({
    /** settings **/
    beforeSend: function() {
       $("#target").fadeOut('slow', function() {
           flag=true;
       });
    },
    success: function() {
       var timer = setInterval(function() {
            if (flag) {
                $("#target").slideUp('slow');
                clearInterval(timer);
            }
       }, 500)
    },
    error: function() {
       $("#target").fadeIn('slow');
    }
});

また、完全なハンドラー (現在は と呼ばれています.done())、promise、または.is(':animated')この種のものに使用できる単に もあります。通常、単純な間隔が最も単純な解決策であることがわかりました。

于 2012-07-16T17:36:37.737 に答える
1

jquery Deferredの使用をお勧めします。

var myDfd = $.Deferred();
$("#target").fadeOut('slow',function(){
   myDfd.resolve();
});

var ajaxDfd = $.ajax({
    /** settings **/
    beforeSend: function() {
       $("#target").fadeOut('slow');
    },
    error: function() {
       $("#target").fadeIn('slow');
    }
});

$.when(ajaxDfd, myDfd).then(function() {
   $("#target").slideUp('slow');
});

最初の Deferred (fadeOut) を待ち、AJAX クエリが完了して 1 つのコールバックが実行されます。

于 2012-07-16T17:41:21.737 に答える
1

ここに大雑把な方法があります：

var done = false;
var todo = null

var amDone = function() {
   if (todo) {
      todo();
   } else {
      done = true;
   }
};

var ifDone = function(f) {
  return function() {
     if (done) {
        f();
     } else {
        todo = f;
     }
  };
};

$.ajax({
    /** settings **/
    beforeSend: function() {
       $("#target").fadeOut('slow', amDone);
    },
    success: ifDone(function() {
       $("#target").slideUp('slow');
    }),
    error: ifDone(function() {
       $("#target").fadeIn('slow');
    })
});

さまざまな効果を許可するように修正された編集

于 2012-07-16T17:35:46.950 に答える