jquery Basics 6___ Animation effects

Recently because too busy, always have no time to write things, there is not an old saying that time is like a sponge in the water, squeeze always have, but feel when the programmer, always busy to write code, busy learning new technology, time is not enough, want to squeeze time to write something, always squeeze out. Busy stealing half-day free, have time or write better. Sometimes feel that they write these things are not a lot of people have, and jquery official online writing is better than their own, but write their own things will always have their own understanding, have their own ideas in which, and the impression is more profound. People who have learned jquery, will certainly feel that when the time to follow the example will, really want to write large-scale JS code, but always write, but not three or four months, basically forget, plainly or without their own opinion, practice is less, lack of the ability to organize the scattered things. So is to remember to forget, forget again from the newly-learned, to the final model like college students reading, open always so few pages, learning will be caught in the bottleneck.

Not much nonsense to say, or directly into the theme, learning the animation effect of jquery.

The animation effect of jquery is mainly showing, hiding, fading in, fading out, unfolding, folding, but also can define their own animation effect, animation effect is actually CSS style change, for skilled artists, they write the style is more beautiful, and the layout is relatively reasonable, People like me write code for the CSS are very annoying, not to mention the design of beautiful animation, but the basic things still have to introduce, really to the development of the project, you want to write this kind of things, estimated also no one let you write. Afraid of not beautiful. The next step is to introduce the content

Show, Hide:

Method: Hide,show,toggle (if the display is hidden, if hidden is displayed)

Parameters: Show (Time,function ()), where time is measured in milliseconds, refers to hidden and displayed time, but has three fixed values, ' fast ', ' slow ', ' normal '. When the parameter is not passed by default is 400 milliseconds, fast is 200 milliseconds, slow is 600 milliseconds. function indicates that the function continues after the animation effect has been performed

Scene: A flash of the effect,

    $ ("#divArea"). (+). Show (.function all () {             $ ("#divArea"). Hide (1000). Delay (+). Show (all);    });

Scenario Two is the hint of information gradually quit, is what landed successfully, what the password is wrong, the user name is not correct and so on these things. The delay method here is the meaning of latency, hide (1000) after the animation effect is finished, wait 400 milliseconds before starting to perform the show (1000) animation effect.

Fade in, fade out:

Method: Fadein,fadeout,fadetoggle,fadeto ()

Parameters: FadeTo (time,opacity), the first parameter is the meaning of the time, the second parameter is the transparency, the value is 1 to 0, calculated as a percentage.

Scenario: The scenario used in development is the hint message fades out slowly. The usage is similar to the previous.

expand, collapse:

Method: Slideup (), Slidedown (), Slidetoggle ()

Parameters: Slideup (Time,function ()), the parameters here and before the same, so not in the introduction, the practice of their own immediately see the effect.

Custom animations:

Method: Animate (Css,time,function)

Parameters: CSS represents a CSS style, similar to {background: ' Red ', height:400px}. Time is the same as before, and the function is the same as before.

Scene: Animation effect is actually the change of CSS effect, we achieve a sliding effect, every time, a certain distance to the right.

1     var number =0; 2    $ ("#divArea"). Animate ({3        ' margin-left ': number+ ' px '4    },1000,function  Goleft () {5Number       = (number +)%screen.availwidth; 6       $ ("#divArea"). Animate ({' Margin-left ': number+ ' px '},1000, goleft); 7    })

Queue animations:

Method: In fact, it is in function functions to continue to write the previous action.

Scene: Hides all div elements one after another.

   $ ("div"). First (). Hide (' slow ',function() {       $ (this). Next (). Hide (' Slow', Arguments.callee);   })

Stop the animation and complete the animation:

Method: Finish,stop,

Parameters: Stop (clearqueue,gotoend), these two values are Boolean values, clearqueue means that the subsequent action is cleared, and if true indicates that only the animation is executed, and if False indicates that subsequent animations are performed after the animation is executed. Gotoend represents the final effect of the animation, and if true, indicates the final effect of the animation, false will stop when the click stops. The finish does not have any parameters, which means that the effect is directly achieved after all animations have been executed.

To demonstrate the effect, please refer to: http://www.jquery123.com/finish/

At this point the basic animation effect is complete, but to achieve the effect of the beautification, or learn more CSS. After learning, custom animations can be done.

jquery Basics 6___ Animation effects