CODEWITHSUNDEEP
javascriptjqueryanimationcolors
Krish
Krish

Reputation: 2670

jQuery .animate() not working properly

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>

Upvotes: 0

Views: 660

Answers (3)

Zbigniew
Zbigniew

Reputation: 27604

You need to use jQuery UI or jQuery plugin to animate color. You are also using wrong color code, use #fff or #ffffff.

From animate:

For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used

Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

Upvotes: 1

gdoron
gdoron

Reputation: 150273

You can't animate colors! 

.animate({
        color: '#ffff'
    });

unless you add a reference to jQuery UI.

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).

Working DEMO using jQuery UI

Upvotes: 2

Rob W
Rob W

Reputation: 349112

#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).

Upvotes: 7

Related Questions