Smoother Jquery Animation
Solution 1:
The best way is to use CSS transitions/animations for that. If some browser does not support them then such a browser is not good on animations of any kind.
Transitions and animations in CSS are better optimizeable by native code so in theory may exhibit significantly smoother (higher FPS) behavior.
As of your jquery animations above:
- Try to reduce number of fadeTo's on complex elements.
- Try to simplify styling - reduce number of use cases of
opacity
orrgba()
with transparency.
And in general: the fewer DOM elements you have, the better.
Solution 2:
Queue
When using jQuery animate you should prefix your animations with dequeue()
and stop()
if you are running more than 1 animation or repeating the same animation otherwise they may build up behind each other waiting to run and result in unintended delay.
$('#md1').dequeue().stop().animate({ top: "-60px" }, 500);
Here's a Codepen demo and a another slightly more complex demo that use this.
Frame Rate
You can manipulate the frame rate in which jQuery processes the animation with jquery.fx.interval
which is documented here.
This property can be manipulated to adjust the number of frames per second at which animations will run. The default is 13 milliseconds. Making this a lower number could make the animations run smoother in faster browsers (such as Chrome) but there may be performance and CPU implications of doing so.
Since jQuery uses one global interval, no animation should be running or all animations should stop for the change of this property to take effect.
Reference: http://api.jquery.com/jquery.fx.interval/
Interval
You can use setInterval to break up the animation into smaller bits which will be easier and faster to process.
For example, if you want to animate the position of a div over any extended distance you can rather break up the distance into small portions and set it to run at a constant speed so it looks as though it's a single smooth transition.
Request
The interval method really only works for simple animations. But for more complex animations you can use requestAnimationFrame
which gives control to the browser to choose when is the best moment to execute the code.
functionanimLoop( render, element ) {
var running, lastFrame = +newDate;
functionloop( now ) {
// stop the loop if render returned falseif ( running !== false ) {
requestAnimationFrame( loop, element );
running = render( now - lastFrame );
lastFrame = now;
}
}
loop( lastFrame );
}
// UsageanimLoop(function( deltaT ) {
elem.style.left = ( left += 10 * deltaT / 16 ) + "px";
if ( left > 400 ) {
returnfalse;
}
// optional 2nd arg: elem containing the animation
}, animWrapper );
- Further Reading: "requestAnimationFrame for Smart Animating" - Paul Irish
Post a Comment for "Smoother Jquery Animation"