Изменение фоновой непрозрачности div с использованием RGBa

Я пытаюсь изменить непрозрачность фона div с помощью слайдера jquery ui.

Пользователь может изменить цвет фона для div, поэтому мне нужно знать, как изменить альфа-параметр фона без изменения цвета.

Это мой код:

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

Мне нужно каким-то образом изменить только альфа-часть переменной currentColor. Я надеюсь, что кто-то может мне помочь! ТИА

Ответ 1

Мне удалось решить это, изучив и адаптировав ответ, предложенный @Tom Smilack, используя строковые манипуляции.

Я сделал небольшое изменение, так что его ответ также будет работать для div, которые не имеют альфа-набора изначально, вот последний код, который я использую:

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

            });

Спасибо всем за предложения, и я надеюсь, что это поможет людям, желающим одинаково функционировать

Ответ 2

Попробуйте следующее:

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

Обновленный пример здесь

Ответ 3

Управление строками может быть лучшим способом:

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

Ответ 4

Даже если это уже решено, возможно, моя небольшая функция поможет кому-то. В качестве аргумента требуется элемент jQuery, например $('a') (который имеет либо фоновый цвет RGB, либо RGBA), и значение альфа от 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+')');
}

Вы бы использовали его следующим образом:

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

Важная часть состоит в том, что элемент <a> уже имеет фоновый цвет rgb или rgba.

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

Ответ 5

Просто для меня более понятным решением является разбиение цвета rgba по запятой и изменение последнего элемента с новым значением непрозрачности (конечно, работает только в том случае, если начальный цвет был 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);

Ответ 6

почему вы просто не переключаете класс с этим цветом и непрозрачностью

 $(myelement).toggleclass();

se jquery api