Estoy tratando de cambiar la opacidad de fondo de un div usando una interfaz de usuario jquery slider.

El usuario puede cambiar el color de fondo del div, por lo que necesito saber cómo puedo cambiar solamente el parámetro alfa de fondo sin cambiar el color.

Este es mi código:

$('#opacity-slider').slider({ min: 0, max: 1, step: 0.1, value: 1 })
                .bind("slidechange", function() {
                    //get the value of the slider with this call
                    var o = $(this).slider('value');

                    var e = $('.element-active');
            var currentColor = $('.element-active').css('background-color');        
                    $(e).css('background-color', 'rgba(255, 255, 255, '+o+')')
                });

Necesito alguna forma de cambiar sólo la alpha parte de la currentColor variable. Espero que alguien me pueda ayudar! TIA

Leer este plz deepubalan.com/blog/2010/03/29/…
Entiendo el differenct entre la opacidad y rgba. Quiero usar rgba, por lo que no afecta a la opacidad de la div del contenido

OriginalEl autor Ronny vdb | 2012-12-05

6 Comentarios

  1. 14

    Intente esto:

    var alpha = $(this).slider('value');
    var e = $('.element-active');
    $(e).css('background-color', 'rgba(255,255,255,' + alpha + ')');​

    Se Ha Actualizado El Ejemplo Aquí

    Hola, lo siento que no me explico correctamente. El código me funciona, pero establece el color de fondo o blanco, ya que es lo que se establece en el código (255,255,255) quiero reemplazar esto con el color que el usuario establezca para la div. Espero que esto quede más claro
    element-active es el div de la derecha?
    sí, que es el elemento que necesito para averiguar lo que el actual color de fondo es, a continuación, utilizando el control deslizante de cambio es la opacidad con RGBa
    Actualizado el código de intentarlo una vez jsfiddle.net/HXXP4/3

    OriginalEl autor palaѕн

  2. 3

    Cadena de manipulación podría ser el mejor camino a seguir:

    var e = $('.element-active');
    var currentColor = $('.element-active').css('background-color');
    var lastComma = currentColor.lastIndexOf(',');
    var newColor = currentColor.slice(0, lastComma + 1) + o + ")";
    $(e).css('background-color', newColor);

    OriginalEl autor Tom Smilack

  3. 2

    Me las arreglé para resolver esta aprendiendo y adaptando la respuesta sugerida por @Tom Smilack, mediante la manipulación de cadenas.

    He hecho un pequeño cambio para que su respuesta también el trabajo de divs que no tienen el alfa establecido originalmente, aquí está el último código que estoy usando:

    $('#opacity-slider').slider({ min: 0, max: 1, step: 0.1, value: 1 })
                .bind("slidechange", function() {
                    //get the value of the slider with this call
                    var o = $(this).slider('value');
    
                    var e = $('.element-active');
                    var currentColor = $('.element-active').css('background-color');
                    var lastComma = currentColor.lastIndexOf(')');
                    var newColor = currentColor.slice(0, lastComma - 1) + ", "+ o + ")";
                    $(e).css('background-color', newColor);
    
                });

    Gracias a todos por las sugerencias y espero que esta ayuda a las personas que quieren el mismo funcitonality

    OriginalEl autor Ronny vdb

  4. 1

    Aunque esto es ya resuelto, tal vez mi pequeña función le ayuda a alguien.
    Como argumento se toma un jQuery elemento $(‘a’) (que tiene un RGB o RGBA background-color) y un valor alfa de 0 – 1.

    function RGBA(e, alpha) { //e = jQuery element, alpha = background-opacity
        b = e.css('backgroundColor');
        e.css('backgroundColor', 'rgba' + b.slice(b.indexOf('('), ( (b.match(/,/g).length == 2) ? -1 : b.lastIndexOf(',') - b.length) ) + ', '+alpha+')');
    }

    Que podría utilizarlo como este:

    RGBA(jQuery('a'), 0.2);

    La parte importante es que el <a>elemento tiene un rgb o rgba color de fondo establecido ya.

    <a href="#" style="background-color: rgb(100,10,50);">Sample</a>

    OriginalEl autor Vincens von Bibra

  5. 0

    Sólo para mí más comprensible solución es la división de color rgba por comas y cambiar último elemento con el nuevo valor de opacidad (por supuesto que sólo funciona si el color inicial fue rgba):

    var newAlpha = $(this).slider('value');
    //initial background-color looks like 'rgba(255, 123, 0, 0.5)'
    var initialBackgroundColor = $('.element-active').css('background-color');
    var bgColorSeparated = initialBackgroundColor.split(',');
    //last element contains opacity and closing bracket
    //so I have to replace it with new opacity value:
    bgColorSeparated[3] = newAlpha + ')';
    var newColor = bgColorSeparated.join(',');
    $('.element-active').css('background-color', newColor);

    OriginalEl autor feeeper

  6. -1

    ¿por qué simplemente no alternar una clase con ese color y opacitty

     $(myelement).toggleclass();

    se api de jquery

    Él quiere «slide» (no toggle) la opacidad!!!

    OriginalEl autor GoAntonio

Dejar respuesta

Please enter your comment!
Please enter your name here