RBGA support for jQuery Color

Published on .

The jQuery Color plugin adds color animation support (backgroundColor, color, borderBottomColor, etc). It is unfortunately limited to RGB mode.
You will find on this demo page the implementation of support for RGBA colors.

Example: Animate the backgroundColor and color style properties

Top ↑
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css" media="screen">
            body {
                background: #232323 url(http://static.pioupioum.fr/img/patterns/002.gif) repeat 0 0;
            }
            div {
                position:absolute;
                cursor:pointer;
                line-height:70px;
                text-align:center;
            }
            .block {
                color:#FFF;
                height:70px;
                margin:20px 10px;
                width:150px;
            }
            .bgcolor-rgb {
                background-color: #68BFEF;
            }
        </style>
    </head>
    <body>
        <div class="block bgcolor-rgb">Click me</div>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" charset="utf-8"></script>
        <script src="jquery.color.js" type="text/javascript" charset="utf-8"></script>
        <script>
$(".block").click(function() {
    $(this).animate({
        "backgroundColor": "rgba(203, 54, 191, .4)",
        "left": "+=280px"
    }, 1500)
    .animate({ "backgroundColor": "rgba(46, 116, 205, .4)" }, 230)
    .animate({ "backgroundColor": "rgba(44, 204, 64, .4)" },  230)
    .animate({ "backgroundColor": "rgba(207, 141, 51, .4)" }, 230)
    .animate({ "backgroundColor": "rgba(203, 54, 191, .4)" }, 230)
    .delay(250)
    .animate({
        "backgroundColor": "#68BFEF",
        "left": "+=280px"
    }, 1500)
    .delay(250)
    .animate({ "color": "rgba(240, 232, 49, .2)" }, 500)
    .delay(500)
    .animate({ "color": "white" }, 500)
    .delay(230)
    .animate({
        "backgroundColor": "transparent",
        "left": "-=280px"
    }, 1500)
    .delay(600)
    .animate({
        "backgroundColor": "#68BFEF",
        "left": "-=280px"
    }, 1500)
});
        </script>
    </body>
</html>

Demo

Check that a browser supports RGBA

Top ↑

A detection support RGBA is completed by the plugin to store the result in the property jQuery.support.rgba. If it's true, the browser is RGBA-capable, false otherwise.

Note: In case of failure, the plugin will working in RGB.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <style type="text/css" media="screen">
body {
    background-color: #ECECEC;
}
.result {
    font-weight: bold;
    padding: 2px 5px 1px;
    text-transform: uppercase;
    background-color: white;
    border: 1px solid #818181;
}
.success {
    color: green;
}
.error {
    color: red;
}
        <style>
    </head>
    <body>
        <div>
            <p>Your browser is RGBA-capable? <span class="result">Check…</span></p>
        </div>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" charset="utf-8"></script>
        <script src="jquery.color.js" type="text/javascript" charset="utf-8"></script>
        <script>
$(function() {
    if ($.support.rgba) {
        $(".result").text('yes').addClass('success');
    } else {
        $(".result").text('no').addClass('error');
    }
});
        </script>
    </body>
</html>

Demo