javascript - Fade in AJAX loaded content? -
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 load desired content div, have text says "loading content...".
what i'd fade out text says "loading content...", , fade in content loaded in ajax request.
how accomplish this?
i tried using fade('in') , fade('out') methods, didn't work. tried call get() method , set opacity 1 via start(1), didn't work either.
you don't need instance of fx.tween , apply start, use element prototype .fade you.
only thing need set oncomplete (as cannot async) replace content, remove oncomplete , fade in.
check jsfiddle demo: http://www.jsfiddle.net/dimitar/nf2jz/291/
new request.html({ url: '/echo/html/', data: { html: "loaded content 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 testing purposes on jsfiddle (you send data along request simulate response , specify amount of seconds delay response server)
another way handle chaining on fx instance:
oncomplete: function() { this.element.set("html", response); this.removeevents("complete"); }, link: "chain" }).fade(0).fade(1);
have fun
Comments
Post a Comment