jquery animate doesn't working with rgba

Question

I'm trying to animate div using jquery. I want to do a button from the div which change his opacity on hover:

$(document).ready(function() {
$('.zprava_link').hover(
    function() {
         $(this).stop().animate(backgroundColor: 'rgba(121, 202, 199, 1.0)', 0);
    },
    function() {
         $(this).stop().animate(backgroundColor: 'rgba(121, 202, 199, 0.7)', 800);
    });

  }); 

my div:

.zprava_link{
width:42px;
height:100%;
position: absolute;
right:0px;
top:0px;            
background-color: rgba(121, 202, 199, 0.7);
}

and usage in HTML:

<div class="zprava_link" id="">
  <table>
  <tr><td><a href=""><img src="images/rarr.png"></a></td></tr>
  </table>

</div>

I also link newest versions of jquery library and jquery.color library, but it doesn't work, script doesn't start. It may seems, that script isn't good, but it is. I'm afraid, that it's some "not support" bug. I'm using Firefox 27/Opera 12.

Does anybody know, what's wrong with that?

Answer 1

You could do it with just CSS, by using CSS transitions

.zprava_link {
    width:42px;
    height:100%;
    position: absolute;
    right:0px;
    top:0px;
    transition:background-color 0.8s;
    background-color: rgba(121, 202, 199, 0.7);
}
.zprava_link:hover{
    background-color:rgba(121, 202, 199, 1);
}

Demo at http://jsfiddle.net/gaby/vGtGL/

---

To only have the animation on the hover-out set the duration on the :hover rule

.zprava_link:hover{
    transition-duration:0s;
    background-color:rgba(121, 202, 199, 1);
}

Demo at http://jsfiddle.net/gaby/vGtGL/1/

Answer 2

jQuery cannot animate colours by default. In order to animate colours, use the official jQuery.Color plugin.

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).