Make jQuery.animate run smoother with almost no code changes
jQuery comes with .animate()
that lets you transition some CSS selectors:
Copyfunction floatIn($element) { $element.css({ 'opacity': 0, 'margin-top': 200px }); $element.animate({ 'opacity': 1, 'margin-top': 0 }, { duration: 500 }); }
The animation is implemented using setInterval
and Javascript. This works great, but it's not as smooth as a CSS transition.
Fortunately the animate
API can be mapped almost 1:1 to CSS transitions. There are libraries like Transit that act as a drop-in replacement for animate
, but animate using CSS transitions instead of Javascript. This gives you a much higher framerate.
If Transit has too many bells and whistles for your taste, and you'd like to roll your own animate
replacement, you might want to take a look at this.