Change only Alpha channel in background-color

Question

I am trying to change only the alpha channel in the background-color of a div element(using a slider). But I don't know how to do It. Here is my code:

$(function() {
    $( "#slider" ).slider({
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function( event, ui ) {
            // While sliding, update the value in the alpha div element
            $('#idOfMyDiv').css('background', rgb(,,,ui.value) ); //I don't know what to do here
        }
    });
});

Answer 1

1. Fetch the current background color,
2. Parse it into r,g,b
3. Create a new rgba color string
4. Change the background color to the new rgba color string.

Like this:

var newAlpha=0.50;

var bg=$('#idOfMyDiv').css('backgroundColor');

var a=bg.slice(4).split(',');

var newBg='rgba('+a[0]+','+parseInt(a[1])+','+parseInt(a[2])+','+newAlpha+')';

$('#idOfMyDiv').css('backgroundColor',newBg);

Example code and a Demo:

var newAlpha=0.50;
var bg=$('body').css('backgroundColor');
var a=bg.slice(4).split(',');
var newBg='rgba('+a[0]+','+parseInt(a[1])+','+parseInt(a[2])+','+newAlpha+')';
$('body').css('backgroundColor',newBg);

body{ background-color: orange; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>