Fade in AJAX loaded content?

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();

Before I load the desired content into the div, I have text that says "Loading Content...".

What I'd like to do is fade out the text that says "Loading Content...", and then fade in the content loaded in from the AJAX Request.

How exactly would I accomplish this?

I tried using the fade('in') and fade('out') methods, but that didn't work. I also tried another call to the get() method and set the opacity to 1 via start(1), but that didn't work either.

Answer 1

you don't need to get the instance of Fx.tween and apply start, use the element prototype .fade which does it for you.

only thing you need to do is SET the onComplete (as this cannot be async) to replace content, remove the oncomplete and then fade back in.

check this 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();

this is for testing purposes on jsfiddle (you send the data along with the request to simulate the response and specify the amount of seconds to delay the response from the server)

another way to handle it is chaining on the fx instance:

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

have fun