Radio with diff colors

radio with diff colors

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<div data-role="page">
    <div data-role="header">
         <h1>Page One</h1>

    </div>
    <div data-role="content">
        <ul data-role="listview" data-theme="b">
            <li id='accura'><a href=#>Acura</a>
            </li>
            <li id='audi'><a href=#>Audi</a>
            </li>
            <li id='bmw'><a href=#>BMW</a>
            </li>
        </ul>
    </div>
</div>

CSS

.red {
    background-color:red;
    -webkit-transition:background-color 2s;
    -moz-transition:background-color 2s;
    -o-transition:background-color 2s;
    transition:background-color 2s
}

JavaScript

$(document).ready(function () {

    $("div.ui-btn-inner").click(function () {

        //addClass works to change the background  
        $(".ui-btn-inner").removeClass("red");
        $(this).addClass("red", 1000);

        //animate won't change the background color
           //   $(".ui-btn-inner").css("font-size", "1em");
            //  $(this).parent().animate({
            //       backgroundColor: "#343434",
//                   fontSize: "2em"
              // }, 2000)
    });

});