淡入 AJAX 加载的内容？

Question

 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 请求加载的内容。

我将如何做到这一点？

我尝试使用淡入淡出('in') 和淡入淡出('out') 方法，但没有奏效。我还尝试了另一个对 get() 方法的调用，并通过 start(1) 将不透明度设置为 1，但这也不起作用。

Answer 1

您不需要获取 Fx.tween 的实例并应用 start，使用元素原型 .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 上进行测试（您将数据与请求一起发送以模拟响应并指定延迟来自服务器的响应的秒数）

另一种处理方法是链接 fx 实例：

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

玩得开心