Search code examples
jqueryjquery-animatebackground-colorrgba

jquery animate doesn't working with rgba

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?

Solution

  • 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/