Core points

• jQuery's animate() function is practical, but not a high-performance animation engine, which may lead to problems with memory consumption and low frame rate. However, it remains a viable option for developers who are unfamiliar with CSS animations or seeking cross-browser compatibility.
• CSS animations are usually faster and more efficient than jQuery's animations, thanks mainly to GPU acceleration. However, they also have some limitations, including compatibility issues with older versions of Internet Explorer, and dependency percentages rather than time to determine animation durations, which can complicate tuning.
• Velocity.js is a jQuery plugin that significantly improves the performance of jQuery animations without major changes to your code. By replacing $.animate() with $.velocity(), developers can get higher frame rates and maintain jQuery's chain call characteristics.

We have all used jQuery's animate() function to create excellent effects on web pages. Then, with the introduction and rise of CSS3, we were told that our code was terrible. They suggest we abandon all jQuery-based animations (and usually JavaScript-based animations) and instead use CSS-based animations. This change forces us to deal with many browser (in)compatibility issues and lack of functionality; not to mention the inability to run them on older versions of Internet Explorer. This pain is reasonable because CSS animations are faster than JavaScript animations. At least that's what they told us. Is this true? Is the jQuery's animate() function really that slow? Is there a way to enhance it easily without changing our code? The answer is yes. In this article, we will understand some of the limitations of the two ways to create animations, and then we will understand how to get better performance with jQuery code.

What is the problem with jQuery?

We all know and love jQuery (some people don't actually like it). This library designed to simplify HTML client scripts has helped hundreds of thousands of developers around the world (not real data). It makes HTML document traversal and manipulation, event handling, Ajax and more a breeze, easing the burden of handling incompatibility and errors in all browsers. Among its features, jQuery also allows the creation of animations and effects. With it, we can animate CSS properties, hide elements, fade out elements, and other similar effects. However, jQuery's design goal has never been to be a high-performance animation engine, and it has never intended to support truly complex, CPU/GPU-consuming animations. As evidence of this fact, jQuery's memory consumption often triggers garbage collection, causing problems when executing animations. Additionally, jQuery uses setInterval() instead of requestAnimationFrame() (read more about requestAnimationFrame() ) behind the scenes to run the animation, which does not help generate high frame rates. Due to these factors, “Who knows the best” advocates the use of CSS to create our animations and effects.

CSS animation and transitions

Let's be clear: CSS animation is better than jQuery animation. When it comes to animation, jQuery may be several times slower than CSS. CSS animations and transitions have the advantages of being accelerated by GPU hardware, which is excellent when it comes to moving pixels. This factor seems to be a huge improvement, especially in situations where performance is critical, such as mobile devices. This is great, isn't it? The truth is, all of this has limitations and problems. The first limitation is that not all CSS properties can be improved through the GPU. Therefore, it is wrong to think that using CSS animations will always win. Another problem is that CSS animations are not portable, at least not in all browsers you may target. For example, the transition does not work in Internet Explorer 9 and below. Worse, animations in CSS are currently based on percentages rather than time (seconds or milliseconds). This means that changing the duration of the animation after you finish the animation can be very painful unless you use a preprocessor like Sass or Less. Finally, CSS animation requires typing a large number of vendor prefixes. Yes, we can delegate a tool to handle them, but that's just another thing to worry about.

In addition to previous considerations, there are some other good reasons why jQuery animation should not be ignored. They are more related to lack of skills than the weakness of the technology itself, but are still worth mentioning. If a developer is used to creating animations with jQuery, then there is a high probability that the developer cannot use CSS to perform the same task. Maybe it takes a long time for developers to create the same effect in CSS, so that the effort is not worth the benefit. Or, developers may not want to learn another technique to create highly customizable animations. There is nothing to be ashamed of. Everyone has their own limitations in a specific field. The point here is that we want the animations created with jQuery to have better performance so we don't need to convert them to CSS animations. Fortunately, there is a solution.

Improve the function of jQueryanimate()

The answer to solving jQuery animation problem is called Velocity.js. Velocity.js is

Unlike jQuery 1.X that uses older versions of IE, Velocity is compatible with IE8. This shouldn't be a major issue for most projects. At this point you may be wondering how using Velocity.js will affect the code base. The answer is "in a very ridiculous way." To integrate Velocity.js, all we have to do is download it and include it in the webpage we want to use. The last step is to replace <q cite="https://github.com/julianshapiro/velocity">一個(gè) jQuery 插件，它重新實(shí)現(xiàn)了 $.animate() 以產(chǎn)生更高的性能（使 Velocity 也比 CSS 動(dòng)畫(huà)庫(kù)更快），同時(shí)包含了改進(jìn)動(dòng)畫(huà)工作流程的新功能。</q> that appears with $.animate(), $.velocity() without changing any parameters! This change is as simple as performing a search and replacement in a text editor or IDE of our choice. Once completed, our animation performance will be improved immediately. This is great because we can reuse our knowledge without having too much impact on the code base. Additionally, since it is a jQuery plugin that keeps chain calls, we can continue to create a typical "method call chain" of jQuery.

Conclusion

In this article, I describe some issues that affect jQuery animations. We discuss why CSS animation has been heavily promoted in the past few years to replace jQuery. Then, I highlighted some limitations of CSS and some shortcomings in performance. Finally, I briefly introduce you to Velocity.js, a jQuery plugin that allows you to improve the performance of JavaScript animations and effects without changing the source code. This article is just an introduction to the comparison between jQuery, CSS and JavaScript animations. If you want to dig into this topic, I highly recommend you read the following articles written by GSAP authors and Velocity.js authors: - Debunking the myth: CSS animation vs. JavaScript- CSS vs. JS animation: Which is faster?

FAQs about improving jQuery animations

How to slow down jQuery animation?

You can slow down jQuery animation by increasing the duration of the animation. Duration is specified in milliseconds in the .animate() method. For example, if you want to slow down the animation to last for 5 seconds, you should write $(selector).animate({params}, 5000);. The larger the number, the slower the animation.

What is the role of easing in jQuery animation?

The easing in jQuery animation refers to the speed of the animation progress at different points during its duration. jQuery provides two built-in easing methods: "swing" and "linear". "Swing" is the default easing method, which makes the animation progress slower at the beginning and end and faster in the middle. "Linear" On the other hand, ensures that the animation is constant throughout the process.

How to improve the performance of jQuery animation?

There are many ways to improve the performance of jQuery animation. One way is to use CSS transitions where possible, as they generally perform better than jQuery animations. Another way is to limit the number of animations running simultaneously. You can also use the requestAnimationFrame method, which allows the browser to optimize animations for smoother animations.

How to stop running jQuery animation?

You can use the .stop() method to stop the running jQuery animation. This method stops the currently running animation on the selected element. For example, $(selector).stop(); will stop the animation on the selected element.

How to link multiple animations in jQuery?

You can link multiple jQuery animations by simply calling multiple animation methods on the same element. For example, $(selector).fadeIn().slideUp(); will first fade into the selected elements and then slide them upwards. jQuery ensures that the animation is executed in the order of call.

How to animate multiple attributes at the same time in jQuery?

You can animate multiple properties at once in jQuery by passing an object containing the properties you want to animate to the .animate() method. For example, $(selector).animate({height: "300px", width: "200px"}); will animate the height and width of the selected element at the same time.

How to use callback functions in jQuery animation?

The callback function in jQuery animation is a function executed after the animation is completed. You can pass the callback function as a second parameter to the .animate() method. For example, $(selector).animate({params}, function(){ /* 動(dòng)畫(huà)完成后要執(zhí)行的代碼 */ });.

How to create custom animations in jQuery?

You can use the .animate() method to create custom animations in jQuery. This method allows you to animate any CSS properties. For example, $(selector).animate({left: " =50px"}); will move the selected element to the right by 50 pixels.

How to use queue and dequeue methods in jQuery animation?

The queue and dequeue methods in jQuery are used to control the execution of the animation. The queue method allows you to add new animations to the animation queue to be executed on the selected element. The dequeue method allows you to delete and execute the next function in the queue.

How to use the .delay() method in jQuery animation?

The

method in jQuery is used to delay the execution of subsequent projects in the queue. It is usually used for delayed animations. For example, .delay() will delay fadeIn animation by 500 milliseconds. $(selector).delay(500).fadeIn();

The above is the detailed content of Easily Improving jQuery Animations. For more information, please follow other related articles on the PHP Chinese website!