Question

我正在尝试使用jquery ui滑块更改div的背景不透明度。

用户可以更改div的背景颜色，因此我需要知道如何在不改变颜色的情况下更改背景的alpha参数。

到目前为止，这是我的代码：

$('#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变量的alpha部分。我希望有一个人可以帮助我！ TIA

Answer 1

试试这个：

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

Updated Example Here

Answer 2

字符串操作可能是最好的方法：

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 3

我设法通过学习和调整@Tom Smilack建议的答案，使用字符串操作来解决这个问题。

我做了一个小改动，这样他的答案也适用于最初没有alpha集的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);

            });

感谢所有人的建议，我希望这有助于人们想要相同的功能

Answer 4

即使这已经解决了，也许我的小功能会帮助某人。作为一个参数，它需要一个jQuery元素，如$（'a'）（具有RGB或RGBA背景颜色）和0到1的alpha值。

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>

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

Answer 6

为什么你不打算用这种颜色和不透明的方式切换课程

 $(myelement).toggleclass();

se the jquery api

使用RGBa更改div的背景不透明度

6 个答案: