when fadeTo completes, fade divs back in with new color (rgba)
<p>I am trying to teach myself a bit of <strong>Javascript</strong> and made this collection of divs that I am fading out at random intervals using <strong>jQuery</strong> as an experiment!</p>

<p>I would like to determine when each individual <code>div</code>'s opacity is 0, so that I may fade them back in.</p>

<p>This is what I have so far</p>

<pre><code>/*
  author: Tim Down
  source: http://stackoverflow.com/a/4257739/1252748
*/
function hasClass(el, cssClass) {

    return el.className &amp;&amp; new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);

}

function checkVisibility(id) {

    console.log(id);
}


function timeFunction(current, element) {

    var elementId = element.id;

    /*
      author: Remy Sharp
      source: http://twitter.com/#!/rem/status/15427387974
    */
    var color = '#' + (~~ (Math.random() * 16777215)).toString(16);
    var border = '#' + (~~ (Math.random() * 16777215)).toString(16);

    console.log(color);

    $('#' + elementId).css("backgroundColor", color);
    $('#' + elementId).css("border", "1px solid " + border);

}


function randomFromInterval(from, to, qty) {

    /*
      author: Francisc
      source: http://stackoverflow.com/a/7228322/1252748
    */

    var arr = [];

    for (var i=0; i &lt;= qty; i++) {
        arr[i] = Math.floor(Math.random() * (to - from + 1) + from);
    }

    return arr;
}



function getDelayArray(qty) {

    var from = 100;
    var to   = 10000;
    var delayArray = randomFromInterval(from, to, qty);

    return delayArray;

}




function filterUndefinedRecordsInArray(arr) {

    /*
      author: vsync
      source: http://stackoverflow.com/a/2843625/1252748
    */


    //arr = arr.filter(function(){return true});
    arr = arr.filter(Number);

    return arr;
}



//remove non-numbers
function only_numbers(str) {

    //remove non-numbers

    /*
      author: csj
      source: http://stackoverflow.com/a/1862219/1252748
    */

    str = str.replace(/\D/g,'');
    return str;

}

function getColors() {


    var colors = randomFromInterval(0, 255, 3);

    var r = colors[0];
    var g = colors[1];
    var b = colors[2];

    //random alpha
    var a = (Math.random()).toFixed(2);

    var c = {

        r: r,
        g: g,
        b: b,
        a: a,

    }

    return c;
}

$(document).ready(function() {


    var grid      = "";
    var idCounter = 0;
    var rows      = 15;
    var columns   = 15;
    for (var g = 1; g &lt;= rows; g++) {

        grid += "&lt;div class='break'&gt;";

        for (var i = 1; i &lt;= columns; i++) {

            var c = getColors();
            var b = getColors();
            grid += "&lt;div id='div_" + idCounter + "' class='fl pixel' style='background-color:rgba(" + c.r + "," + c.g + "," + c.b + "," + c.a + "); border:2px solid rgba(" + b.r + "," + b.g + "," + b.b + "," + b.a + ")'&gt;&lt;/div&gt;";

            idCounter++
        }

        grid += "&lt;div class='cb'&gt;&lt;/div&gt;";
        grid += "&lt;/div&gt;";

    }

    $('body').append(grid);

    //how to distribute the fading times
    var delayArray = getDelayArray(15);
    //console.log(delayArray);

    var idArray = [];

    var elements = document.getElementsByTagName("div");

    var current = 0;

    while (current &lt;= (elements.length - 1)) {

        var currentElement = elements[current];

        if (hasClass(elements[current], "pixel")) {

            //get the divs' ids but remove the "div_" from the beginning
            var cleanCurrentElementId = only_numbers(currentElement.id);

            //an array of the ids of all the divs with the class 'pixel'
            //but it still gets some elements filled with undefined as
            //it increments outside the if ( hasClass ) loop
            //so below it must have these undefined elements removed
            idArray[current] = cleanCurrentElementId;
        }
        current++;
    }

    //an array of all the ids of the divs on the page that have the 'pixel' class
    var cleanIdArray = filterUndefinedRecordsInArray(idArray);

    //randomly pick a quantity from the above array (cleanIdArray)
    //set from / to / qty variables so that the randomly chosen numbers
    //are within the range of the availble divs
    var from   = 1;
    var to     = cleanIdArray.length;
    var qty    = 250;
    var idsToFade = randomFromInterval(from, to, qty);


    for (var fadeId in idsToFade) {

        var tempId = idsToFade[fadeId];

        var delay = getDelayArray(1);

        $('#div_' + tempId).fadeTo(delay[0], 0);

        //checkVisibility($('#div_' + tempId).attr('id'));

    }


});
</code></pre>

<p><strong>DEMO:</strong> <a href="http://jsfiddle.net/loren_hibbard/dZtFu/" rel="nofollow">http://jsfiddle.net/loren_hibbard/dZtFu/</a></p>

<p>But I do not know how to determine when each individual div has completed his <code>fadeTo</code>.</p>

<p>Although, when I fade them back in, I'd like to give them a random <code>rgba</code> value again; I understand jquery <code>.css</code> does not support that. Has anyone an idea on how I can give a new <code>rgb</code> and opacity value.</p>
