sleepycow sleepycow - 4 months ago 20
jQuery Question

Animating color change in Velocity.js

I've just started using Velocity.js and am trying to make a simple animation where I change the color of a circle from red to yellow. The HTML I have is just...

<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.ui.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<svg height=300 width=300>
<circle id="example" cx=50 cy=50 r=20 fill="red"></circle>
</svg>
</body>
</html>


...and I am trying to change the color of the circle to yellow in my JavaScript like this:

$('#example')
.delay(1000)
.velocity({fill: "yellow"});


What am I doing wrong?

Answer

As per the velocity.js docs, you need to pass fill colour value as a hex string:

Snippet:

$('#example').delay(1000).velocity({ fill: '#ffff00' }, { duration: 2000 });
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js"></script>
<svg height=300 width=300>
    <circle id="example" cx=50 cy=50 r=20 fill="red"></circle>
</svg>

Hope this helps.

P.S. You are trying to load multiple jQuery versions i.e. 1.8.3 and 1.9.1. Remove the unnecessary one.