Question

I am designing a website and for effects I came across the below set of jquery code for achieve text color change with animation. But it doesn’t work and I am not sure what is wrong.

JSFIDDLE

Below is the code that I’m currently experiencing the issue with:

jQuery:

$('.list-5 li a').hover(function() {
    $(this).stop().animate({ color: '#fff' })
}, function() {
    $(this).stop().animate({ color: '#0e1b23' })
})

HTML:

  <div class="list-5">
    <ul>
     <li>
       <a href="#">Hello world</a> 
     </li>
    </ul>
  </div>

Answer 1

#FFFF is an invalid color. Use either #FFF or #FFFFFF.

Also, the default jQuery .animate does not animate colors. You’ll have to use jQuery UI for that (or the Color plugin).

• Demo using the color plugin: http://jsfiddle.net/FMTDp/13/
• Demo using jQuery UI: http://jsfiddle.net/FMTDp/15/