Cambiare l'opacità dello sfondo di div usando RGBa

Question

Sto provando a cambiare l'opacità dello sfondo di un div usando un cursore ui jquery.

L'utente può modificare il colore di sfondo del div, quindi ho bisogno di sapere come posso solo modificare il parametro alfa dello sfondo senza cambiare il colore.

Questo è il mio codice finora:

$('#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+')') 
       }); 

ho bisogno di un po 'come cambiare solo la parte alpha della variabile currentColor. Spero che qualcuno possa aiutarmi! TIA

Answer 1

sono riuscito a risolvere questo imparando da e adattando la risposta suggerita da @Tom Smilack, usando la manipolazione delle stringhe.

ho fatto un piccolo cambiamento in modo che la sua risposta sarebbe anche lavorare per div che non dispongono di set di alpha in origine, ecco il codice finale che sto 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); 

      }); 

Grazie a tutti per i suggerimenti e Spero che questo aiuti le persone che vogliono la stessa funzionalità

Answer 2

Prova questo:

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

Updated Example Here

Answer 3

manipolazione stringa potrebbe essere il modo migliore per andare:

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); 

Answer 4

Anche se questo è già risolto, forse la mia piccola funzione aiuterà qualcuno. Come argomento ci vuole un elemento jQuery come $ ('a') (che ha un collegamento RGB o RGBA background-color) e un valore alpha da 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+')'); 
} 

si può usare in questo modo :

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

la parte importante è che l'elemento <a> ha un RGB o RGBA background-color set già.

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

Answer 5

perché semplicemente non alternare una classe con quel colore e opacitty

$(myelement).toggleclass(); 

se the jquery api

Answer 6

Solo per me la soluzione più comprensibile è la divisione di colore RGBA da una virgola e cambiando ultimo elemento con nuovo valore di opacità (ovviamente lo funziona solo se il colore iniziale era 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);