convert css animation with calc to javascript animate

Question

Hi I am trying to convert my css animation to jquery animate.

I created a JSFiddle example: https://jsfiddle.net/x69chen/g86m7ecm/

You can see, I have commented out which I used to write

box1 {
    animation: drop 1s ease forwards;
}

@keyframes drop {
    from { opacity: 1 }
    to { opacity: 1; top: calc(65% - 82px); }
}

Now I am trying to convert this to jquery because I am using vuejs component at frontend, and every time when the page reload the component, the animation runs again.

And I tried

var top = $(".box").parent().height() * 65% - 82;
$(".box").delay(2000).animate({
    top: top
}, 1000);

It did not work well, because in jquery code, the box did not drop to the same location as it was in the css.

And I have set 2000 millisecond in the jquery delay function, but it seems it dropped much later than the delay time of 2s I set in CSS. Does anyone know why it is?

Thanks for any help!

@gerardo-blanco yes, I am converting the css to jquery, and I was just giving an example — James Chen
– James Chen, Commented Feb 13, 2018 at 18:17

scraaappy · Accepted Answer · 2018-02-13 18:24:52Z

2

you can calculate top this way : var top = $(".box").parent().height() * .65 - 82;

answered Feb 13, 2018 at 18:24

scraaappy

2,8862 gold badges21 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

James Chen Over a year ago

wow, so there is a difference between 65% and 0.65? Is that possible for you to explain why?

scraaappy Over a year ago

% is arithmetic operator for modulo in javascript. And mathematically x*65% is equivalent to x*0.65 ;)

Gerardo BLANCO Over a year ago

@JamesChen i think this has to do more with math than the algorithm. Using decimal points is the same as fractions. 65% = 13/20. And multiplying a number times that fraction, it will give you the 65% of the number

Collectives™ on Stack Overflow

convert css animation with calc to javascript animate

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related