CODEWITHSUNDEEP
jqueryanimationjquery-animate
enikmaster
enikmaster

Reputation: 23

jquery .animate() doesn't work

I don't understand why my code doesn't work...

I want to animate the color of a title when clicked, and it doesn't work.

I reduced my page just to this simple part because the rest doesn't need animation and it's working fine.

Here's the JSFiddle

HTML

<head>
    <script src="Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="Scripts/Script.js" type="text/javascript"></script>
</head>
<div id="Nav">
    <h2>About</h2>
    <h2>Works</h2>
    <h2>Contacts</h2>
</div>

CSS

#Nav {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px;
    z-index: 2;
}
#Nav h2 {
    display: table;
    color: #353535;
}
#Nav h2:hover {
    cursor: pointer;
}

JQUERY

function sortEvents() {
    $("#Nav h2").click(function () {
        $("h2").animate({ "color": "#f49d29" }, 1500);      
    })
}

Upvotes: 2

Views: 7166

Answers (3)

V31
V31

Reputation: 7666

You need to use Jquery.UI inorder to have color animation. Have Updated your Fiddle to demonstrate the same.

Code Snippet:

$(document).on('click','#Nav > h2', function () {
    $(this).animate({ "color": "red" }, 1500);      
});

Upvotes: 1

Irvin Dominin
Irvin Dominin

Reputation: 30993

In your fiddle you haven't included jQuery; then animate using color can be only used by including jQuery UI or jQuery colors:

jQuery UI bundles the jQuery Color plugins which provides color animations as well as many utility functions for working with colors.

Consider to color only the clicked element by using this as selector:

$("#Nav h2").click(function () {
    $(this).animate({
        "color": "#f49d29"
    }, 1500);
})

Demo: http://jsfiddle.net/IrvinDominin/49Zrf/5/

Upvotes: 2

agmcleod
agmcleod

Reputation: 13621

The standard jquery library does not support color animation. Need to include jQuery UI to make it happen. http://jqueryui.com/animate/

Upvotes: 0

Related Questions