Question

$('a').hover(function(){
    $(this).stop();
    $(this).animate({
        color: '#22373A'
    }, 'slow');
}, function(){
    $(this).stop();
    $(this).animate({
        color: '#fe57a1'
    }, 'slow');
});

Im using this to change the opacity of elements when hovering, but seems it wont work with color change. Any Ideas or suggestions?

regards
dennym

Answer 1

Have you considered using CSS transitions instead?

HTML:

<a href="#">foo</a>
<a href=#>bar</a>​

CSS:

html {
  font: 2em/1.5 sans-serif;
}

a {
  color: #22373a;
  -webkit-transition: color 1s ease-out; /* Saf3.2+, Chrome */
  -moz-transition: color 1s ease-out; /* Firefox 4+ */
  -ms-transition: color 1s ease-out; /* IE10+ */
  -o-transition: color 1s ease-out; /* Opera 10.5+ */
  transition: color 1s ease-out;
}

a:hover, a:focus {
  color: #fe57a1;
}

Demo: http://jsfiddle.net/HTDSJ/