Abandon jQuery for animation, and jquery for animation

Abandon jQuery for animation, and jquery for animation

In the Web development circle, developers often think that CSS animation is a high-performance web Animation Technology. If you want to make webpage loading faster, you should use pure CSS animation. In fact, this idea is wrong. Many developers have long abandoned javascript animation and forced themselves to use complicated CSS styles to achieve UI interaction with the same effect. They completely ignore the better interactivity brought about by javascript.

However, the fact is that javascript-based animation effects are usually as fast as css-based animations, and sometimes faster. CSS animation is usually considered to be faster, because we always use it to compare it with jQuery animation. In fact, the slow speed is jQuery's $. animate (). However, javascript animation libraries avoid DOM operations and are usually about 20 times faster than jQuery.

So let's smash the rumor and write some real examples to evaluate the javascript animation performance.

Why JavaScript?

It is very convenient to use CSS when converting attributes to styles, and they can also provide excellent performance without using other libraries. But when you use CSS to implement complex design, they become very troublesome.

All in all, CSS will definitely limit your design. But if you use javascript, you can solve these problems logically. The javascript animation engine provides the following functions:

• Cross-browser SVG support
• Physics-based animation Loading
• Timeline control,
• Begistranslations

Tip: if you are interested in the display of javascript, you can read the "CSS vs. JS Animation: Which Is Faster?" section of Julian Shapiro ?" And Jack Doyle's "Myth Busting: CSS Animations vs. JavaScript .". If you want to see some demos, You can see performance pane and "Library Speed Comparison ".

Velocity and GSAP

The two most common javascript animation libraries are Velocity. js and GSAP. These libraries have no performance loss when using jQuery, because they do not use jQuery's animation stack.

If you must use jQuery on the page, you can use Velocity and GSAP to replace jQuery $. animate (). For example

 
 

  
  
$element.animate({ opacity: 0.5 });
 
 

Can be written:

 
 

  
  
 $element.velocity({ opacity: 0.5 }).
 
 

These two libraries can also be used without jQuery:

 
 

  
  
/* Working without jQuery */
  
  
 
  
  
Velocity(element, { opacity: 0.5 }, 1000); // Velocity
  
  
 
  
  
TweenMax.to(element, 1, { opacity: 0.5 }); // GSAP
 
 

Like in the preceding example, no jQuery is used, and Velocity retains a syntax similar to jQuery's $. animate.

Unlike GSAP, GSAP makes it easier to call static methods through object-oriented design. You can fully control the animation.

In both solutions, you do not use jQuery's object elements, but what if you want to operate the original DOM node? You can use

 
 

  
  
document.getElementByID
  
  
 
  
  
document.getElementsByTagName
  
  
 
  
  
document.getElementsByClassName
  
  
 
  
  
document.querySelectorAll
 
 

These are similar to jQuery's selector implementation. We will briefly introduce these methods below.

Prevent jQuery

Tip: If You Need To Know $. animate () of jQuery, you can look at Velocity's documentation ..

Let's take a look at the functions of querySelectorAll ::

 
 

  
  
document.querySelectorAll("body"); // Get the body element
  
  
document.querySelectorAll(".squares"); // Get all elements with the "square" class
  
  
document.querySelectorAll("div"); // Get all divs
  
  
document.querySelectorAll("#main"); // Get the element with an id of "main"
  
  
document.querySelectorAll("#main div"); // Get the divs contained by "main"
 
 

Like the code, you can simply select CSS through querySelectorAll. It returns all matching elements in the array:

 
 

  
  
/* Get all div elements. */
  
  
var divs = document.querySelectorAll("div");
  
  
 
  
  
/* Animate all divs at once. */
  
  
Velocity(divs, { opacity: 0.5 }, 1000); // Velocity
  
  
TweenMax.to(divs, 1, { opacity: 0.5 }); // GSAP
 
 

Because we didn't use jQuery's object element, you may wonder how we should link the animation. In fact, we can do this:

 
 

  
  
$element // jQuery element object
  
  
.velocity({ opacity: 0.5 }, 1000)
  
  
.velocity({ opacity: 1 }, 1000);
 
 

In Velocity, you can simplify your code like this:

 
 

  
  
/* These animations automatically chain onto one another. */
  
  
Velocity(element, { opacity: 0.5 }, 1000);
  
  
Velocity(element, { opacity: 1 }, 1000);
 
 

In this way, there will be no performance waste for processing animations. You will find that the performance of javascript is similar to that of CSS, and the operation is more convenient.

 

Geeks tags-professional and accurate sharing, follow the geeks you are interested in, the Community provides excellent tutorials, Interactive Teaching

For more information about front-end technologies, visit the geek interactive course library and code recording.

Original article: abandon jQuery for animation

How can I prevent repeated clicks of an animation when using jQuery animation for special effects?

Add a judgment in your click event. Assume that the target for generating the animation effect is the target. Then add this judgment.
If (! Target. is (": animated ")){}
He will ensure that your animation will only be generated after the previous animation ends, and the animation integrity can be maintained, but the continuous clicking will show a dull feeling.
And $ ("# id "). stop (true, false ). animate ({...}, 1000); this will force your previous animation to end immediately and reach the animation execution end state to run the next animation at the same time, it will cause the animation to be out of touch, but the response is fast
Which one do you want to use?

How can we use jquery's animate method to achieve an animation effect?

Let's talk about the second question first:
Odd row: even, even row odd
Your situation is
$ ("Table> tr: even") returns an odd number of rows.
$ ("Table> tr: odd") gets an even number of rows, and then calls css or attr ("class ", "...").

First question:
It is not clear whether you want to scroll up or in what direction, but you can use the. delay () method for delayed loading. Just do a recursive load.
Click zoom in to create two layers. The width and height of one layer are both 100%. You can use fadeTo to set transparency to cover the background (note that the z-index attribute is set ), you can use ajax to obtain images and load them to the second layer. clone method.
We recommend that LZ find an api. You can find the answer to most of the questions above. If you want it, I have an API of the Chinese version JQuery1.4.