FadeIn a part of an Ajax snippet with dojo

I want to reload bits of a page and fadein parts of that using dojo. Now the problem is, once I insert the innerHTML after it loads, everything becomes visible right away. I'll try to explain:

function reload(page) {
   var sliderBox = dojo.byId("slider开发者_开发问答_box");
   var xhrArgs = {
     url: "/myhtmlsnippet.html",
     load: function(data) {
        dojo.fadeOut({
            duration:100,
            node:sliderBox,
            onEnd:function() {
                dojo.byId('slides_container').innerHTML = data;
                dojo.fadeIn({
                    duration:400,
                    node:sliderBox,
                    onEnd:slideRotate()
                }).play();
            }
        }).play();
     }
  }
  var ajax = dojo.xhrGet(xhrArgs);
}

slider_box is a child of slides_container. I want to fade out slider_box, reload slides_container with slider_box staying hidden, and then fade in slider_box.

I tried setting slider_box to visibility:hidden via CSS but that way it never fades in. So, can anyone help me out here?

First, you fade out the node #slider_box. So its opacity fall to 0.

Then, you replace that node by some new content. There will still be a #slider_box after instruction:

dojo.byId('slides_container').innerHTML = data

but that would be a new node, which opacity hasn't been touched.

So its fully visible and the fadeIn operation will animate its opacity from 1 to 1, in other words it will do nothing.

You must set opacity to 0 and/or visibility to hidden (don't know how dojo animations work) just after the innerHTML instructions. edit:or better, set opacity to 0 befire in your html template you're calling.

Plus, the sliderBox variable you pass as node: argument to fadeIn refers to, as I said earlier, a node you wiped out by replacing in with your innerHTML statement.

You must lookup up again to the new node like this:

node:dojo.byId("slider_box"),

in conclusion, innerHTML is the source of all javascript evil (after ie, of course).