Cambiar el color de fondo de elementos individuales sobre la marcha

Question

¿Hay alguna manera en CSS o JQuery donde puedo cambiar dinámicamente el fondo de las etiquetas li para que se vuelvan ligeramente más claras para cada elemento hasta que llegue a blanco?

Por ejemplo, di que tenía una lista de 10 li elementos. El primero tendría un fondo rojo (# ff0000), el siguiente sería un tono rojo más claro, y así sucesivamente hasta que lleguemos al último, que tendrá un fondo de blanco (#FFFFFF).

La lista puede tener cualquier longitud y solo quiero que el color de fondo vaya de un color, p. rojo a otro color, p. blanco. Mi sitio usa jQuery así que si tengo que usar eso no me importa.

Gracias

Answer 1

Esto es relativamente fácil, suponiendo que usted puede construir un selector que llama la lista de <li> elementos.

Algo como esto (el código no se ha probado):

// get all <li>'s within <ul id="my-list"> 
var items = $('#my-list li'); 

// the increment between each color change 
var step = (255.0/items.size()); 

items.each(function(i, e) { 
    var shade = i * step; 
    $(this).css("background-color", "rgb(255," + shade + "," + shade + ")"); 
}); 

Answer 2

simple plugin que permite modificar los partida y RGB los valores finales:

<script type="text/javascript"> 

    (function ($) { 
     $.fn.transitionColor = function (options) { 

      var defaults = { 
       redStart: 255, 
       greenStart: 0, 
       blueStart: 0, 
       redEnd: 255, 
       greenEnd: 255, 
       blueEnd: 255 
      }; 
      options = $.extend(defaults, options); 

      return this.each(function() { 

       var children = $(this).children(); 
       var size = children.size(); 

       var redStep = (options.redEnd - options.redStart)/(size - 1); 
       var greenStep = (options.greenEnd - options.greenStart)/(size - 1); 
       var blueStep = (options.blueEnd - options.blueStart)/(size - 1); 

       children.each(function (i, item) { 
        var red = Math.ceil(options.redStart + (redStep * i)); 
        var green = Math.ceil(options.greenStart + (greenStep * i)); 
        var blue = Math.ceil(options.blueStart + (blueStep * i)); 

        $(item).css('background-color', 'rgb(' + red + ',' + green + ',' + blue + ')'); 
       }); 

      }); 
     }; 
    })(jQuery); 

    $(document).ready(function() { 
     $("#list").transitionColor(); 
    }); 

</script> 

<ul id="list"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
</ul> 

Answer 3

Aunque son un poco más complicado que las otras respuestas , esto le dará un agradable degradado lineal de un color a otro, y le permitirá usar su representación hexadecimal.

marcado

<ul id="my-list"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
</ul> 

código

$(document).ready(function() { 
    makeLovely($("#my-list li"), 0x00ff00, 0x0000ff); 
}); 

// code modified from: http://www.herethere.net/~samson/php/color_gradient/color_gradient_generator.php.txt 
function makeLovely(items, startColor, endColor) { 
    var r0 = (startColor & 0xff0000) >> 16; 
    var g0 = (startColor & 0x00ff00) >> 8; 
    var b0 = (startColor & 0x0000ff); 
    var r1 = (endColor & 0xff0000) >> 16; 
    var g1 = (endColor & 0x00ff00) >> 8; 
    var b1 = (endColor & 0x0000ff); 
    var steps = items.length; 

    items.each(function(index) { 
     var r = interpolate(r0, r1, index, steps); 
     var g = interpolate(g0, g1, index, steps); 
     var b = interpolate(b0, b1, index, steps); 
     var newColor = zeroFill(((((r << 8) | g) << 8) | b).toString(16), 6); 

     // console.log(newColor); 

     $(this).css('background-color', newColor); 
    }); 
} 

function interpolate(start, end, index, steps) { 
    if(start < end) { 
     return ((end - start) * (index/steps)) + start; 
    } 
    return ((start - end) * (1 - (index/steps))) + end; 
} 

// stolen outright from: http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript 
function zeroFill(number, width) { 
    width -= number.toString().length; 
    if (width > 0) { 
     return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number; 
    } 
    return number; 
} 

Por supuesto, esto podría ser envuelto en un plugin de jQuery si lo prefiere.

Espero que ayude!