Animate ({}) animation for jquery

In the process of Web page production and use all kinds of animation, form a variety of, flash,css,js,canvas, and so can be achieved, for its merits and effects can only say different.

What is the animation effect, in fact, the gradient effect in the Web page is a very basic animation, the basis of the animation is the time effect, in the specified time to complete what effect. The most important point of animation is based on the human visual habits, moving things are often the object of mind capture. Seize the user's vision, the animation as the basis to publicize their urgent want to express and beautify the rich interface content, also is the connotation of animation.

The following is the use of jquery how to achieve animation effect, animation elements are moving, move of course there is a need for CSS position properties to some understanding. Then is the time parameter, the time is to determine the animation effect Foundation, then is the motion trajectory, the motion trajectory determination derives from today we learned the animate ({}), must mention that the JQ is prevalent to today still has many desirable functions, is not only for the use of selectors, Other tool functions and animation methods are also very powerful, basically you can see the page animation effect it can help you achieve.

The following first attach an example, write is very simple, novice production has master please treatise, thank you!

Html:

< P > Click Animation </p><class= "Ha"  >enheng</div>

Css:

<style type= "Text/css" >p{Background-color:Rgba (240,210,210,1.00);width:70px;Height:20px;}. Ha{width:100px;Height:100px;Background-color:Rgba (53,178,231,1.00);position:relative;}. Cur{Background-color:Rgba (83,148,236,1.00);}. Cur1{Background-color:Rgba (37,213,23,1.00);}. CUR2{Background-color:Rgba (47,44,53,1.00);}
</style>

JQ Code:

<script type= "Text/javascript" src= "jq/jquery-3.1.1.min.js" ></script><script type= "Text/javascript ">$ (document). Ready (function (){    varPPAP = $ ("p"); varDdad = $ (". Ha"); vari = 0; varM =100; varN =10; functionMy (i) {ddad.animate ({"Left": m*I,"Border-radius": NI,}); if(i>2,i<3) {$ (". Ha"). Removeclass ("Cur2"). AddClass ("cur").);} Else if(i>3,i<4) {$ (". Ha"). Removeclass ("cur"). AddClass ("Cur1").);} Else{$ (". Ha"). Removeclass ("Cur1"). AddClass ("Cur2").);};    }; $("P"). On ("click",function() {i+=1; if(i>5) {i=0};        My (i);    }); Timer= SetInterval (function(){        $("P"). Trigger ("click"). CSS ("Background", "Red"); },1000); $(". Ha"). Stop (true,true). MouseOver (function() {clearinterval (timer);    }); $(". Ha"). Stop (). Mouseout (function() {Timer= SetInterval (function(){        $("P"). Trigger ("click"). CSS ("Background", "Red"); },500); })})</script>

PS: First we want to design what kind of animation, here is a simple example, that is, click on the P tag, and then the following DIV tag will be moved to the right, specifically, each move 100 pixels moved 5 times, and then after the load is complete set setinterval () so that it can automatically start, and set the conditions, Let him loop the start, let's break down the code.

First: Define the parameters we need PPAP and Ddad, do not think more I am very fashionable, hum, PPAP, good continue, and then we define the global constants and variables, constant n/m variable i;

Second: We've defined a new function my (), let him do one thing for us, what, that is the Ddad, that is, the motion trajectory of the DIV tag, animate ({}). Two things inside. Left and Border-radius two attribute values are changed. There are questions please Baidu a bit, thank you. Once defined, the animation completion event can be set in Adimate, where we do not use this time but the new timer we have built on it later.

Then: I bind a click event to the P tag, where I set the automatic increment of the variable. And if () {} condition function, let the variable I value not more than 5, then this will let our variable loop to move up.

Finally: to bind a function to a custom timer, the thing that helps us do is that we do not manually click the P tag to start automatically, and then call Trigger () to help us to repeat the activation of the Click event to the P element binding. Then the value of the variable will increase, return to our my (i), and then have the offset of the example will be increased, the whole process of the loop to move, and then we give Div bound two mouse mouse events, you see me changing the pattern of the use of the selector, I also test, this will not let the code problems, However, it is not clear to the selector that JQ is indeed very powerful, they complete the hover effect, across the stop, slide out to continue to start the animation.

To the end of the operation of the whole animation, animation is very simple, but also very complex, specific to see how we use it in real life, we use a lot of things, navigation, pull down, folding, accordion, shutters, drag and drop, focus map and many other effects, are a hobby of this people must go to understand and learn things , in fact, the use of a language will have a lot of similarities, and the same language to solve an animation there are many different ways, we just stand on the shoulders of others, the operation of others have set a good thing, really one day we have a new discovery that is called the creation, now the most called extension extension, or even lower.

Animate and CSS in transition and transform also have a lot of common, canvas belongs to HTML5 thing, his function is strong enough, of course, JS is the core of the foundation, the original JS now look more important than anything, As a popular language in the 2017 it also has a lot of extensibility, there are many ways to use, there is no way to fully elaborate, first mentioned a little about animate, the introduction of the Discovery Delay (), stop (), queue animation (), callback and so on. Too many things need their own to step by step to try and tamping, in the next also continue to go to the server, toward App,ui ....

Animate ({}) animation for jquery