Menu
I give up. How do I get Velocity defined. None of the examples show this, and correctly; it should be easy. I am attempting to use velocity version 1.2.3 without JQuery, (released nine days ago according to GitHub). I obtained the first version (an earlier one, 1.2.2) by direct download from GitHub to my webpage, then saved my webpage as velocity.js. The second one was obtained by going to https://github.com/julianshapiro/velocity, accessing velocity.js and saving it as Velocity123.js.
This test program was to help me get started working with velocity, but I cannot yet get there due to Velocity undefined situation, as reported by the webdeveloper/webconsole of FireFox v 40.0.3. The other FAQ instance of Velocity undefined seems to not apply since he was using an out-of-date version of JQuery. In the velocity1.2.3, I have seen the actual definition of Velocity, and I have sourced the file. I have tested the file definition by copying it and DIR-ing it in a shell after changing / to \, so how can it not be defined? The test code is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test1 Velocity</title>
<meta charset="utf-8"/>
<!-- Standard download from GitHub
<script src="C:/Users/dbd/Documents/Library4thFloor/velocity.js">
</script>
-->
<!-- Suggested by wikipedia
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js">
</script>
-->
<!-- manually included from github latest -->
<script src="C:/Users/dbd/Documents/Library4thFloor/Velocity123.js">
</script>
<script type="text/JavaScript">
function press(){
alert("entered press");
var idrect = document.getElementById("sq");
alert("after idrect is set");
Velocity(idrect, {opacity:0.3},{duration:2,easing:"ease-in-out",loop:5});
return false;
}
</script>
</head>
<body>
<h1>Sample SVG with Velocity</h1>
<br>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400">
<rect id="sq"
x="25"
y="25"
width="200"
height="200"
fill="lime"
stroke-width="4"
stroke="pink"
onclick="press()"
/>
</svg>
</body>
</html>
674
A quick read of the velocity.js documentation shows what you're doing wrong. Velocity is used like other jQuery methods.
For example, if you wanted to make a div red then blue with 1000ms per animation:
$('div')
.velocity({ backgroundColor: 'red' }, 1000)
.velocity({ backgroundColor: 'blue' }, 1000)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
