Learning dojo: Chaining animations on a collection of objects

Question

I'm doing some basic exercises with dojo to learn its syntax and methods.

I've created a simplified example below for the purpose of learning chaining animations on a group of items.

Could anyone offer some feedback on the dojo code I have created? Am I utilising the correct library features in this circumstance? Which of the dojo options do you think is the best solution for this use case?

For reference, in jQuery I would accomplish this with:

$(function() {
    // jQuery
    $('div').fadeOut().fadeIn();
})

For the dojo solution, I've come up with four solutions that rely on the presence of different dojo components:

// dojo
dojo.require("dojo.fx");
dojo.require("dojo.NodeList-fx");

dojo.addOnLoad(function() { 

    // Option 1: Using dojo.js only
    dojo.forEach(dojo.query('div'), function(div) {
        dojo.fadeOut({
            node: div,
            'onEnd': function() {
                dojo.fadeIn({
                    node: div
                }).play();
            }
        }).play()
    });    

    // Option 2: Using dojo.js and dojo.fx
    dojo.forEach(dojo.query('div'), function(div) {
        dojo.fx.chain([dojo.fadeOut({node: div}), dojo.fadeIn({node: div})]).play();
    });

    // Option 3: Using dojo.js, dojo.fx and dojo.NodeList-fx
    var divs = dojo.query("div");
    divs.fadeOut({
        'onEnd': function() {
            divs.fadeIn().play();
        }
    }).play()

    // Option 4: Using base, dojo.fx and dojo.NodeList-fx
    var divs = dojo.query('div');
    dojo.fx.chain([divs.fadeOut(), divs.fadeIn()]).play();

});

Answer 1

My suggestions are the following:

1. Benchmark and see what works the best.
2. Use whatever you feel most comfortable with.
3. Imo option 4 is the best one.
4. Go to the #dojo channel on freenode. There are great guys there (including me) that will help you with any question you've got.