淡入AJAX加載的內容？

var request = new Request({ 
    method: 'get', 
    url: 'onlinestatusoutput.html.php', 
    onComplete:function(response) 
    { 
    $('ajax-content').get('tween', {property: 'opacity', duration: 'long'}).start(0).set('html', response).set('html', response).tween('height', [0, 650]); 
    } 
    }).send();

在將所需的內容加載到div之前，我有文本顯示「加載內容...」。淡入AJAX加載的內容？

我想要做的是淡出顯示「加載內容...」的文本，然後淡入從AJAX請求中加載的內容。

我到底會如何完成此操作？

我嘗試使用淡入淡出（'入'）和淡出（'出'）方法，但沒有奏效。我也嘗試了對get（）方法的另一個調用，並通過start（1）將不透明度設置爲1，但那也不起作用。

來源

2010-09-30 Brownbay

你不需要獲取Fx.tween的實例並應用start，使用元素prototype.fade它可以爲你做什麼。

只有你需要做的是設置了的onComplete（因爲這不可能是異步），以取代內容，刪除的onComplete然後漸退的事情

檢查這個的jsfiddle了演示： http://www.jsfiddle.net/dimitar/NF2jz/291/

new Request.HTML({ 
    url: '/echo/html/', 
    data: { 
     html: "loaded content is now in", 
     delay: 3 
    }, 
    method: 'post', 
    onRequest: function() { 
     document.id("target").set("html", "Loading content..."); 
    }, 
    onComplete: function() { 
     var response = this.response.text; 
     document.id("target").set("tween", { 
      onComplete: function() { 
       this.element.set("html", response); 
       this.removeEvents("complete"); 
       this.element.fade(1); 
      }, 
      duration: 1000 
     }).fade(0); 
    } 
}).send();

這是用於在的jsfiddle測試目的

另一種方式噸（你與模擬響應和指定的秒的量來延遲來自服務器的響應的請求發送數據一起） O句柄是鏈接在fx實例：

 onComplete: function() { 
      this.element.set("html", response); 
      this.removeEvents("complete"); 
     }, 
     link: "chain" 
    }).fade(0).fade(1);

樂趣

來源

2010-09-30 09:56:33

+1了詳細的例子和的jsfiddle – Michael 2010-09-30 10:13:28

只是一對夫婦的問題：我是否正確理解這一點 - 任何在請求中的「設置onComplete'函數將執行異步？所以實質上，我可以onComplete指向一個匿名函數，例如，可以異步更新5 div？ – Brownbay 2010-09-30 14:29:30

是的正確。這是一個帶有oncomplete事件的分叉進程。你通常不會做'element.fade（1）.fade（0）'，因爲它們會互相取消，所以你需要等待onComplete鏈任何東西。這是什麼鏈接：「鏈」有幫助，或者你可以從onComplete調用。順便說一句，任何Fx實例 - 變體，補間等都會觸發「完整」事件。 – 2010-09-30 14:59:08

淡入AJAX加載的內容？

回答

相關問題