I am a new programmer of JS. I'm trying to learn some HTML animations on JS and I found an amazing package called "VelocityJS". But when I use the
$ele.velocity("fadeIn")
My chrome keeps throwing an error:
VelocityJS: First argument (fadeIn) was not a property map, a known action, or a registered redirect. Aborting.
Now in the official website, Chapter "Command" - "fadeIn and fadeOut", there are 2 examples including the usage. But as far as I tested, It only works for the version under 1.5.0. I wish I can be told if there's any substitution for this after version 2.0.0 (also called Velocity V2)?
And In Chapter "Basics: Performance", it's told that Never use jQuery's $.animate() and $.fade() functions. They slow everything else down, including other animation libraries.
JS FILE
try {
$(test).velocity("fadeIn", { duration: 1500 }).velocity("fadeOut", { delay: 500, duration: 1500 });
} catch {}
HTML FILE
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.js"></script>
<div id='test' style="background-color:black">
some place holder
</div>
copy and past the file above to the example at codepen.io
THIS GIVES THE RIGHT OUTPUT. but the Velocity version of this page is https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js As I want to change the "marginTop" property, I need to use a later version. But I cannot find any documentation on the latest version.
With version 1.5.0, neither of the "marginTop" or "margin-top" works. With version 2.0.0 - 2.0.5, $(elementID).velocity("fadeIn",{duration:1000}) has no effect. Fixing either one is fine for me so far.
Thanks in advance.
Velocity V2 is in beta yet. You could always use direct CSS attributes manipulation with:
The documentation on for V2 is not maintained on the main site yet. You should instead refer for the docs in the Github wiki