淡入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);

玩得开心