CODEWITHSUNDEEP
jquerycss
BigRedDog
BigRedDog

Reputation: 928

jquery animate css style not working

I created this code for an animated table -> http://codepen.io/CliffTam/pen/qRGQjE

When you click on an item, the item will expand.

My problem is with styling the item when I click on it. I can change the font size and padding but I cannot change the font color or line height.

This is my code to trigger the animation:

   $el.animate({
            "font-size": "26px",
            paddingTop: 15,
            paddingRight: 5,
            paddingBottom: 15,
            paddingLeft: 10            }).next().slideDown();

If I try this, change the color to red, it doesn't work:

   $el.animate({
            "font-size": "26px",
            "color": "red",
            paddingTop: 15,
            paddingRight: 5,
            paddingBottom: 15,
            paddingLeft: 10            }).next().slideDown();

Can someone explain to me why the code doesn't worK?

Thanks!

Upvotes: 0

Views: 862

Answers (2)

Rounin
Rounin

Reputation: 29453

If I understand correctly the effect you are trying to achieve, you can achieve it by adding:

$('dt').css({"color" : "black"});
$el.css({"color" : "red"});

beneath your $el.animate({ [...] }).next().slideDown(); statement.

To enable the color transition to animate, you can then add:

dt {transition: color 0.4s linear;}

to your css styles.

Upvotes: 0

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6632

jQuery Core library does not support color animations by default.

You will need to use jQuery UI for properties like color or background-color to work within the JQuery functions like animate().

One of the Solutions:

If you can, just include the JQuery UI library after the JQuery. Many versions of the same can be found here

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://code.jquery.com/ui/1.12.0/jquery-ui.min.js'></script>

I have updated your Codepen

Upvotes: 1

Related Questions