To teach you to use jquery to do animation plug-ins

CSS style properties animation

We now have a lot of animation methods, sliding, fading fade in, and other display hidden animation, but we do not know exactly how to control animation and how the animation happened. Let's introduce a very powerful jquery function, animate, which lets you animate any CSS properties. Let's look at the code:

 
  
  

  
   
   
$ ("P"). Animate ({
  
   
   
padding: "20px",
  
   
   
FontSize: "30px"
  
   
   
},2000)
 
  
  

This code animates all, expands their margins to 20px, enlarges the font to 30px, and finishes in 2 seconds.

In the Animate method, we need to pass in an object as a parameter, and the object's content is the CSS attributes and their values that you need to change. The important thing to note is that the name of the CSS attribute must be written in a hump style, meaning to write backgroundcolor instead of Background-color.

You can pass in a number as the duration of the animation, or it can be a string such as slow normal fast. The values for CSS properties can be px,em, percentages, or points. For example: 100px,10em,50%,16pt.

What's even more exciting is that the written value can be related to the current value, and you just need to write + + or-= on the front, and jquery will automatically overwrite the current state. Let's try it out:

 
  
  

  
   
   
$ ("#navigation li"). Hover (function () {
  
   
   
$ (this). Animate ({paddingleft: <em></em>}, 200);
  
   
   
}, function () {
  
   
   
$ (this). Animate ({paddingleft: <em></em>}, 200);
  
   
   
});
 
  
  

When the mouse passes, you can see a more beautiful change.

You can also use a very simple notation to control the display of certain properties or alternately:

 
  
  

  
   
   
$ ("#disclaimer"). Animate ({
  
   
   
Opacity: "Hide",
  
   
   
Height: "Hide"
  
   
   
}, "slow");
 
  
  

You can see the changes in the elements. As an exercise, you can try to change any attributes you can think of. The Animate method also has some more powerful features, Rockux in a later article.

Color animation

After you know the Animate method, you may also want to change the color of the elements. Of course, color animation is a little bit different because the value of the color from start to finish requires some special calculations. Instead of a linear change of pixel points that do not move in height, jquery needs to do something extra to change the color.

The function of the color calculation is not defined in the underlying library. Because many times it is not necessary, and in order to ensure the size of the library is not added. So we need a plugin: Color animations plugin.

Using Plug-ins

There are a number of useful plug-ins in the official plug-in library. You can search by name category, or by the community's rating for Plug-ins.

When you find the plugin you are interested in, you can download it and put it in your project. It is still necessary to read the Readme file or document before using it, but it is generally included directly in your own document, just like any other JS file.

For those new plug-ins, most of them are documented to find out how they are used.

After downloading and placing the plugin for that color function, you can animate the color properties of the element:

 
  
  

  
   
   
$ ("#disclaimer"). Animate ({"BackgroundColor": "#ff9f5f"}, 2000);
 
  
  

That would be cool.

Slow motion

Easing means having the effect of accelerating and slowing down when the element is dynamically changing, and thus having a real sense of experience. Easing uses some mathematical algorithms to change the speed of animation. Because we use jquery, we don't have to do those complicated math formulas for the time being.

There are two types of easing, linear, and swing in jquery. As long as you use jquery to do animation, you can use the two types of easing classes. The difference between the two of us is expressed by the following figure:

Swing easing classes start at a slower rate and then slow down at the end, very elegant. Visually, swing easing looks much more comfortable than linear linear, and jquery will use swing by default when you specify the ease of use.

For example, when I click the animation to show the first paragraph, he will get bigger and smaller. We first use the linear to make him larger, and then use swing to make him shrink:

 
  
  

  
   
   
$ ("P:first"). Toggle (function () {
  
   
   
$ (this). Animate ({"Height": "+=150px"}, 1000, "linear");
  
   
   
}, function () {
  
   
   
$ (this). Animate ({"Height": "-=150px"}, 1000, "swing");
  
   
   
});
 
  
  

Here's a lot of jquery syntax, and let's explain:

We get the first paragraph by selector.

Toggle event binding on first paragraph

In a handler function, this represents the element that triggers the event

The first handler uses the =+, which means that the height is increased by 150px, using linear easing

The second handler uses-= to reduce 150px and use swing easing

If you've got it all figured out, then you can reward yourself for it.

Advanced Easing class

Easing classes can provide some good visual effects as well as many tasks. There are many easing effects behind swing and linear, which can be implemented through this plugin easing plugin.

The JQuery UI contains Plug-ins

The ease of the library is included in the jquery UI. This library contains some common plug-ins, including color animations, class transformations, and easing. By introducing the jquery UI, you don't need to include each plugin again.

Just download the library and put it in your jquery file after it contains the code. In addition to some of the new features, the easing plug-in provides more than 30 easing classes. It will take a lot of space and no need to explain it, so let's take a look at the chart below.

You may notice that some of the algorithms are outside the graph, which is also an effect, and he will eventually return to the original point.

With these new algorithms, we just need to give these names in place of ease:

 
  
  

  
   
   
$ ("P:first"). Animate ({height: "+=300px"}, Watts, "easeoutbounce");
  
   
   
$ ("P:first"). Animate ({height: "-=300px"}, Watts, "Easeinoutexpo");
  
   
   
$ ("P:first"). Animate ({height: "Hide"}, "Easeoutcirc");
  
   
   
$ ("P:first"). Animate ({height: "show"}, Watts, "easeoutelastic");
 
  
  

To see this figure, you might want to know where the name of these easing options comes from, or where you can see the complete list. These algorithms come from Robert Penner's easing equation, which is described in detail here.

The best way to study these equations is to look at the source code.

Do it

Take a break and try this plugin. You may not be able to use each of these effects, but be aware of each and make quick judgments when needed. Use these special effects, will give you a lot of color, but also become a master necessary things.

Original link: Http://rockux.com/archives/jquery%E4%B8%AD%E7%9A%84%E5%8A%A8%E7%94%BB