fadeTo完成時，褪色的div回用新的顏色（RGBA）

Question

我試圖教我有點的Javascript和使用使這個集合，我在隨機時間間隔淡出的div jQuery的作爲一個實驗！

我想，以確定每個個體div的不透明度爲0，這樣我可能會褪色他們回到

這是我迄今爲止

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

    return el.className && 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 <= 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 <= rows; g++) { 

     grid += "<div class='break'>"; 

     for (var i = 1; i <= columns; i++) { 

      var c = getColors(); 
      var b = getColors(); 
      grid += "<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 + ")'></div>"; 

      idCounter++ 
     } 

     grid += "<div class='cb'></div>"; 
     grid += "</div>"; 

    } 

    $('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 <= (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')); 

    } 


}); 

DEMO：http://jsfiddle.net/loren_hibbard/dZtFu/

但我不知道如何確定每個單獨的div何時完成他的fadeTo。

儘管當我淡化他們時，我想再給他們一個rgba值;我明白jquery .css不支持。有沒有人有一個想法，我怎麼能給一個新的rgb和不透明的價值。

Answer 1

整潔！

給這個fadeTo回調作爲第三個參數：

function giveRandomValue(){ 
    // Use your getColors() function here to set a new color and opacity 

    // var color = ...; 
    // $(this).css('background-color', color); 
    // etc... 
} 

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

Documentation at jquery.com

Answer 2

給你的div元素的randomDiv功能，它應該工作:)

function randomColor() { 
    return '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).toUpperCase(); 
} 

function randomOpacity() { 
    return Math.floor(Math.random() * 100)/100; 
} 

function randomDiv(div) { 
    $(div).css({ 
    'background-color': randomColor(), 
    'opacity': randomOpacity() 
    }); 
}