淡入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加载的内容？

回答

相关问题