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 for demo： 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);

玩得开心

淡入AJAX加载的内容？

1 个答案: