How to Use jQuery as an animation plugin

BKJIA recommended topic: jQuery parade

CSS style property Animation

We now have a lot of animation methods, such as sliding, fade-out, and other hide and show animations, but we still don't know how to precisely control the animations and how they happen. Here we will introduce a very powerful jQuery function, animate. This method allows you to animation any CSS attribute. Let's look at the Code:

 
 

  
  
$('p').animate({  
  
  
     padding:'20px',  
  
  
     fontSize:'30px' 
  
  
},2000) 
 
 

This code will animation all the operations, extend their margin to 20 PX, enlarge the font to 30 PX, and complete in 2 seconds.

In the animate method, we need to first input an object as a parameter. The content of this object is the CSS attributes and their values that you need to change. Note that the name of the CSS attribute must be in the camper format, that is, it must be written as backgroundColor rather than background-color.

You can input a number as the animation duration, or a string such as slow normal fast. The CSS attribute value can be px, em, percentage, or points. For example, 100px, 10em, 50%, and 16pt.

What's even more exciting is that the written value can also be related to the current value. You just need to write + = or-= in front of it, and then jQuery will automatically rewrite the current status. Let's try it:

 
 

  
  
$('#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 pretty change.

You can also use a simple method to control the hidden or alternate display of certain attributes:

 
 

  
  
$('#disclaimer').animate({  
  
  
  opacity: 'hide',  
  
  
  height: 'hide' 
  
  
}, 'slow'); 
 
 

You can see the element changes. As an exercise, you can try to modify any attributes you can think. The animate method also has some more powerful functions. RockUX will talk about it later.

Color Animation

After you know the animate method, you may want to change the color of the element. Of course, color animation is a little different, because the color value requires some special calculations from the beginning to the end. JQuery needs to do some additional things to change the color of pixels that move in height and width.

The color calculation function is not defined in the base library. This is often because this method is not required and is not added to ensure the library size. So we need a plug-in: Color Animations plugin.

Use plug-ins

There are many useful plug-ins in the official plug-in library. You can search by name category or score the plug-in by the community.

After finding the plug-in you are interested in, you can download it and put it in your project. It is necessary to read the readme file or document before use, but it is generally directly included in your own document, just like including other js files.

Most of the new plug-ins use documents to find their usage methods.

After downloading and placing the color function plug-in, you can animation the color attribute of the element:

 
 

  
  
$('#disclaimer').animate({'backgroundColor':'#ff9f5f'}, 2000); 
 
 

This is so dazzling.

Easing

Easing refers to the effect of acceleration and deceleration when elements change dynamically, so as to have a real experience. Easing uses mathematical algorithms to change the animation speed. Because we use jQuery, we do not need to engage in complex mathematical formulas for the moment.

JQuery has two types of easing: linear and swing. When you use jQuery for animation, you can use two types of easing classes. The difference between the two is expressed as follows:

The swing easing class starts from a relatively slow speed and then slows down at the end, which is very elegant. Visually, swing looks much more comfortable than linear. jQuery also uses swing by default after you specify to use easing.

For example, when I click it and the animation shows the first paragraph, it will become larger and smaller. We first use a linear algorithm to increase the size of the image, and then use swing to narrow it down:

 
 

  
  
$('p:first').toggle(function() {  
  
  
  $(this).animate({'height':'+=150px'}, 1000, 'linear');  
  
  
}, function() {  
  
  
  $(this).animate({'height':'-=150px'}, 1000, 'swing');  
  
  
}); 
 
 

There are a lot of jQuery syntaxes here. Let's explain:

We use the selector to obtain the first paragraph.

The toggle event is bound to the first section.

In the processing function, this indicates the element that triggers the event.

The first processing function uses = +, indicating that the height is increased by PX and linear easing is used.

The second processing function uses-= to reduce the size by PX and uses swing to slow down.

If you know this, you can reward yourself.

Advanced easing

The easing class can provide some good visual effects and be competent for many tasks. There are a lot of easing effects behind swing and linear, which can be achieved through the easing plugin plug-in.

JQuery UI plugin

The slow library is included in jQuery UI. This library contains some common plug-ins, including color animation, class conversion, and easing. When jQuery UI is introduced, you do not need to include every plug-in one by one.

You only need to download this library and put it after your jQuery file contains code. In addition to some new features, the easing plug-in also provides more than 30 easing classes. It takes a lot of space to explain these questions one by one. Let's just look at the chart below.

You may have noticed that some algorithms are outside the graph. In fact, this is also an effect, and he will eventually return to the origin.

To use these new algorithms, we only need to give these names in a slow place:

 
 

  
  
$('p:first').animate({height: '+=300px'}, 2000, 'easeOutBounce');  
  
  
$('p:first').animate({height: '-=300px'}, 2000, 'easeInOutExpo');  
  
  
$('p:first').animate({height: 'hide'}, 2000, 'easeOutCirc');  
  
  
$('p:first').animate({height: 'show'}, 2000, 'easeOutElastic'); 
 
 

You may want to know where the names of these easing options come from, or where you can see the complete list. These algorithms are derived from the slow motion equation of Robert Penner, which is described in detail here.

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

Get started

Take a break and try this plug-in. Maybe you won't use every effect, but you know something about it, and you will make quick judgments as needed. Using these special effects will add a lot of colors to your page, and it is also a must for you to become a master.

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