Using jQuery's .css() for smooth css changes without css-transitions

Question

Is there a way to change smoothly .css() with jQuery? Like changing .css("top", myValue) from 0 to 200 smoothly by counting up each step (like 0, 1, 2, 3, ..., 198, 199, 200)? I do not want to use CSS transitions. Reason (long story short): Device which shall run the site does not support transitions smoothly with "top", transformY forces a bug of the browser that's not fixed yet.

Of course I could write a loop like counting "myValue" from 0 to 200 and updating it. But I'd love if there was a jQuery-implemented way.

$("myDiv").css( "top", myValue ); // make it smooth

I think you are looking for .animate()

BattlFrog
– BattlFrog

2019-06-11 19:25:21 +00:00
Commented Jun 11, 2019 at 19:25 — BattlFrog
– BattlFrog, Commented Jun 11, 2019 at 19:25

Jamie Phan · Accepted Answer · 2019-06-11 19:33:07Z

1

Try $.fn.animate (http://api.jquery.com/animate/)

$("myDiv").animate( {top: "+=200"}, duration );

(Note: its relative to the current position. so +=1 is adding 1px and -=1 is removing 1px.)

answered Jun 11, 2019 at 19:33

Jamie Phan

8761 gold badge8 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Using jQuery's .css() for smooth css changes without css-transitions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related