2012-03-27 85 views
2

我偶然發現了一個問題。我正在使用一個用jQuery編寫的簡單的AJAX腳本,我想讓AJAX回調以easyInOut效果爲例改變html,但我不知道該怎麼做,因爲現在,當響應來臨時,div的內容會發生變化帶有某種閃爍效果,這非常醜陋,我認爲這是默認的「效果」。jQuery的AJAX回調效果

腳本:(我試圖添加.fadeOut('slow')html()方法,但什麼都沒有改變)

$.ajax({ 
    type: "POST", 
    url: "institutions-filter.action", 
    data: data, 
    cache: false, 
    success: function(result){ 
     $("#display-block").html(result); 
    } 
}); 

回答

6

隱藏它更改HTML之前,然後顯示它:

$.ajax({ 
    type: "POST", 
    url: "institutions-filter.action", 
    data: data, 
    cache: false, 
    success: function(result) 
    { 
     var $el = $("#display-block"); 

     $el.fadeOut(400, function() 
     { 
      $el.html(result).fadeIn(400); 
     }); 
    } 
}); 

變化400到無論你想要什麼時間...

+0

驚人的 「謝謝你」 是不夠的,謝謝。謝謝。 :) – Denees 2012-03-27 20:04:52

1

試試這個:

$.ajax({ 
       type: "POST", 
       url: "institutions-filter.action", 
       data: data, 
       cache: false, 
       success: function(result){ 
       $("#display-block").html(result).fadeTo("slow", 1); 
       } 
      }); 
+0

你的解決方案沒有奏效,但我會爲你投票:)謝謝。 – Denees 2012-03-27 20:05:29

+0

謝謝,但仍然,fadeTo是我最喜歡的效果,如'easyInOut',我用它在我的所有項目上:] – autumncollection 2012-03-27 20:11:40

0

你必須

$("#display-block").hide().html(result).fadeIn('slow'); 

或者

$("#display-block").fadeOut('slow').html(result).fadeIn('slow'); 
+0

我已經使用了Joseph Silber解決方案,但我會投你一票:)謝謝。 – Denees 2012-03-27 20:06:06

+0

您需要使用效果的回調才能將它們正確鏈接在一起。 – cgTag 2012-07-16 17:29:58