Velocity "fadeIn" Issue with Version 2.0.0+ (including 2.0.5)

517 views Asked by At

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.

1

There are 1 answers

0
ErvalhouS On

Velocity V2 is in beta yet. You could always use direct CSS attributes manipulation with:

element.velocity({
    p: { opacity: 1 },
    o: { duration: 1500 }
}).velocity({
    p: { opacity: 0 },
    o: { delay: 500, duration: 1500 }
});

The documentation on for V2 is not maintained on the main site yet. You should instead refer for the docs in the Github wiki