Dojo Toolkit: How to animate a fade in while adding a new element to the page?

Question

I am stuck with using Dojo to accomplish this. Basically what I am trying to implement is an AJAX feature where a user adds a comment to a blog post and it is immediately displayed.

So I'm to the point where I have the dojo.xhrPost receiving a chunk of html that needs to be added to the list of comments. Now I want to slowly fade in the new comment so the effect isn't so jarring.

Here's what I've got so far:

function displayNewComment(commentHtml)
{       
    //place new comment html at the end of the list
    dojo.place(commentHtml, dojo.byId('Comments'), "last");
    //is there any way to fade this in?
}

Answer 1

I assume that you use dojo.create to create the new node.

In dojo.create you can set the opacity of the node to 0, so it will not show up.

var commentHtml = dojo.create('div', { style:”opacity:0”, innerHTML: data});
dojo.place(commentHtml, dojo.byId('Comments'), "last");

or directly

var commentHtml = dojo.create(
    'div', 
    { style:”opacity:0”, innerHTML: data}, 
    dojo.byId('Comments'), 
    "last"
);

If you build the node otherwise you just need to set opacity to 0.

EDIT

And of course fade it in with

dojo.fadeIn(commentHTML, duration, easingFunc);

Some more info:

http://api.dojotoolkit.org/jsdoc/1.4/dojo.create

http://api.dojotoolkit.org/jsdoc/1.4/dojo.fadeIn

http://api.dojotoolkit.org/jsdoc/1.4/dojo.style