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 , 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/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="" 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>
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./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/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/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>
4 Answers
Reset to default 3A 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)
I use firefox, and this code works with Velocity 2.1.3:
Velocity(document.getElementById('elementId'), {property: 'value'}, time);
I tested your code in Firefox, albeit with velocity.js from a CDN, and it worked. Undefined errors notwithstanding, you might not even see your animation as you've set duration to 2ms. Try setting it to 2000ms.
Note that in HTML 5, you no longer need to provide the script attribute text/javascript. Also, it's not written with a capital J. Try and remove the attribute and see what happens.
Try:
jQuery.Velocity(idrect, {opacity:0.3},{duration:2,easing:"ease-in-out",loop:5});
instead of:
Velocity(idrect, {opacity:0.3},{duration:2,easing:"ease-in-out",loop:5});
I was trying to mimic the staggered effect on this page (https://v2.vuejs/v2/guide/transitions.html#Staggering-List-Transitions) and kept hitting same Velocity is undefined error. Velocity's dependencies (http://velocityjs/#dependencies) indicates without jQuery present, $.Velocity now bees Velocity. So with jQuery present, I reversed it, and it works.
Fwiw: for my app I'm using Vue for some parts, but jQuery is present for other event listeners and animations on the page, which is why I ran into this issue.