jquery animation effects

In the past a long time, the various effects on the Web page also need to use flash in progress. But in recent years,
We've seen very little of this, and most have used JavaScript animations to replace Flash. Over here
Instead of animation, the replacement is the Web Effects section. Web effects such as: Gradient menu, progressive display, picture carousel, etc.;
and animations such as: storyline ads, MV and so on.
A Show, Hide
The method shown in JQuery is:. Show (), hidden by:. Hide (). In the absence of parameters, it is only hard to display
Content and hidden content.
$ ('. Show '). Click (function () {//Display
$ (' #box '). Show ();
});
$ ('. Hide '). Click (function () {//Hide
$ (' #box '). Hide ();
});
Note: the. Hide () method is actually set CSS code in line: Display:none; The. Show () method should be based on the original
To determine whether the element is chunk or inline, if it is a chunk, set the CSS code: display:block; If it is inline,
Then set the CSS code: display:inline;.
The. Show () and. Hide () methods can pass an argument that is controlled in milliseconds (1000 milliseconds equals 1 seconds)
System speed. And it's rich in the constant speed and size, and the transparency transformation.
$ ('. Show '). Click (function () {
$ (' #box '). Show (1000); The display took 1 seconds.
});
$ ('. Hide '). Click (function () {
$ (' #box '). Hide (1000); It took 1 seconds to hide.
});
In addition to the direct use of milliseconds to control speed, JQuery also offers three preset speed parameter strings: slow,
Normal and fast correspond to 600 milliseconds, 400 milliseconds, and 200 milliseconds, respectively.
$ ('. Show '). Click (function () {
$ (' #box '). Show (' fast '); 200 ms
});
$ ('. Hide '). Click (function () {
$ (' #box '). Hide (' slow '); 600 ms
});
Note: Either pass the number of milliseconds or pass the preset string if you accidentally pass an error or pass an empty string.
Then it will take the default value: 400 milliseconds.
$ ('. Show '). Click (function () {
$ (' #box '). Show ('); Default 400 milliseconds
});
Use the callback functions of. Show () and. Hide () to animate the queue.
$ ('. Show '). Click (function () {
$ (' #box '). Show (' Slow ', function () {
Alert (' After the animation continues, execute me! ‘);
});
});
Queue animations, calling themselves using function names
$ ('. Show '). Click (function () {
$ (' div '). First (). Show (' Fast ', function Showspan () {
$ (this). Next (). Show (' Fast ', showspan);
});
});
Queued animations, using Arguments.callee anonymous function self-invocation
$ ('. Hide '). Click (function () {
$ (' div '). Last (). Hide (' fast ', function () {
$ (this). Prev (). Hide (' fast ', Arguments.callee);
});
});
When we use. Show () and. Hide (), if a button switch operation is required, some conditions
Broken. And JQuery provides us with a separate approach to similar functionality:. Toggle ().
$ ('. Toggle '). Click (function () {
$ (this). Toggle (' slow ');
});
Two Slide, scroll
JQuery provides a set of ways to change the height of an element:. Slideup (),. Slidedown (), and. Slidetoggle (). Gu name
Think about it, shrink it up (scroll) and expand it down (slide).
$ ('. Down '). Click (function () {
$ (' #box '). Slidedown ();
});
$ ('. up '). Click (function () {
$ (' #box '). Slideup ();
});
$ ('. Toggle '). Click (function () {
$ (' #box '). Slidetoggle ();
});
Note: The slide, scroll effect and display, hide effects, have the same parameters.
Three Fade in, fade out
JQuery provides a set of methods that are specifically used for transparency changes:. FadeIn () and. FadeOut (), respectively, for fading in,
Fade out and of course there is an automatic switching method:. Fadetoggle ().
$ ('. in '). Click (function () {
$ (' #box '). FadeIn (' slow ');
});
$ ('. Out '). Click (function () {
$ (' #box '). FadeOut (' slow ');
});
$ ('. Toggle '). Click (function () {
$ (' #box '). Fadetoggle ();
});
The above three transparency methods can only be from 0 to 100, or from 100 to 0, if we want to set the specified value is not
There's a way. and JQuery provides the. FadeTo () method to solve this problem.
$ ('. Toggle '). Click (function () {
$ (' #box '). FadeTo (' slow ', 0.33); 0.33 indicates a value of 33
});
Note: Fade in, fade out, and show, hide the effect with the same parameters. For the. FadeTo () method,
If the transparency itself is greater than the specified value, it fades out or vice versa.
Four Custom animations
JQuery offers several simple and commonly used fixed animations that we use. But sometimes, these simple animations can't
To meet our more complex needs. This time, JQuery provides a. Animate () method to create our custom
Four Custom animations
JQuery offers several simple and commonly used fixed animations that we use. But sometimes, these simple animations can't
To meet our more complex needs. This time, JQuery provides a. Animate () method to create our custom
To meet more complex and changeable requirements.
$ ('. Animate '). Click (function () {
$ (' #box '). Animate ({
' Width ': ' 300px ',
' Height ': ' 200px ',
' FontSize ': ' 50px ',
' Opacity ': 0.5
});
});
Note: A CSS change is an animated effect, the above example, there have been four CSS changes, has been
The effect of multi-animation synchronous motion is realized.
Must pass the parameter only one, is a key value to the CSS change style the object. There are also two optional parameters, respectively
For speed and callback functions.
$ ('. Animate '). Click (function () {
$ (' #box '). Animate ({
' Width ': ' 300px ',
' Height ': ' 200px '
}, +, function () {
Alert (' animation execution finished executing me! ‘);
});
});
To the current position, we are all creating a fixed position that does not move the animation. If you want to animate the displacement of a motion state,
You must use custom animations and combine the absolute positioning of the CSS.
$ ('. Animate '). Click (function () {
$ (' #box '). Animate ({
' Top ': ' 300px ',//must first set CSS absolute positioning
' Left ': ' 200px '
});
});
In custom animations, each start motion must be the initial position or initial state, and sometimes we want to pass the current bit
Animation in the set or state. JQuery provides the added and reduced functionality of custom animations.
$ ('. Animate '). Click (function () {
$ (' #box '). Animate ({
' Left ': ' +=100px ',
});
});
There are two ways to customize the implementation of queued animations: 1. Perform an animation in the callback function again; 2. by concatenating or
Sequence to implement the queued animation.
Implement queued animations sequentially
$ ('. Animate '). Click (function () {
$ (' #box '). Animate ({' Left ': ' 100px '});
$ (' #box '). Animate ({' Top ': ' 100px '});
$ (' #box '). Animate ({' width ': ' 300px '});
});
Note: Synchronized animations are implemented if they are not the same element
Animating a queue with concatenating
$ ('. Animate '). Click (function () {
$ (' #box '). Animate ({
' Left ': ' 100px '
}). Animate ({
' Top ': ' 100px '
}). Animate ({
' Width ': ' 300px '
});
});
Queue animations with callback functions
$ ('. Animate '). Click (function () {
$ (' #box '). Animate ({
' Left ': ' 100px '
}, function () {
$ (' #box '). Animate ({
' Top ': ' 100px '
}, function () {
$ (' #box '). Animate ({
' Width ': ' 300px '
});
});
});
});

Show (Speed,easing,callback)	Display, in Show (1000) plus the parameter, is displayed in milliseconds, while supporting slow, normal and fast, respectively, is 600,400,200 milliseconds	<input type= "button" class= "Show" value= "Show"/> <input type= "button" class= "Hide" value= "Hide"/>	$ ('. Show '). Click (function () { $ (' div '). Show (); });
	Hidden, in Show (1000) plus parameters, is hidden in milliseconds while supporting slow, normal, and fast, respectively, 600,400,200 milliseconds		$ ('. Hide '). Click (function () { $ (' div '). Hide (); });
Toggle (Speed,easing,callback)	Toggle Show Hide Feature	<input type= "button" class= "Toggle" value= "Show hidden"/>	$ ('. Toggle '). Click (function () { $ (' div '). Toggle (1000); });
Slidedown (Speed,easing,callback)	Show down	<input type= "button" class= "Down" value= "Down"/> <input type= "button" class= "Up" value= "Up"/> <input type= "button" class= "Toggle" value= "Down"/>	$ ('. Down '). Click (function () {$ (' div '). Slidedown (1000); }); $ ('. up '). Click (function () { $ (' div '). Slideup (1000); }); $ ('. Toggle '). Click (function () { $ (' div '). Slidetoggle (1000); })
Slideup (Speed,easing,callback)	Show down
Slidetoggle (Speed,easing,callback)	Toggle up and down
FadeIn (Speed,easing,callback)	Fade	<input type= "button" class= "FadeIn" value= "Fade in"/>	$ ('. FadeIn '). Click (function () { $ (' div '). FadeIn (1000); });
FadeOut (Speed,easing,callback)	Out	<input type= "button" class= "FadeOut" value= "Fade Out"/>	$ ('. FadeOut '). Click (function () { $ (' div '). FadeOut (1000); });
fadetoggle (speed,easing,callback)	Fade in	<input type= "button"  class= " Fadetoggle " value=" Fades " />",	$ (' div '). Fadetoggle (+); })
Animate (Prop,speed,easing,callback)	Custom Animation (expand)	<input type= "button" class= "animate" value= "Zoom in"/> <div style= "Height:100px;width:100px;div content </div>	$ ('. Animate '). Click (function () { $ (' div '). Animate ({ Width: ' 300px ', Height: ' 200px ', FontSize: ' 50px ', opacity:0.5//Transparency }); });
	Custom Animation (retract)	<input type= "button"  class= "Animatein"   Value= "Retract" &NBSP;/>	var height = $ (' div '). Height ();//Get div original height, var  width = $ (' div '). width ();//Gets the div primitive degree, + var fontsize = $ (' div '). CSS (" Font-size ");//div font primitive size 16px $ ('. Animatein '). Click (function  ()  {     var  newheight = $ (' div '). Height ();     var newwidth = $ (' div '). width ();     $ (' div '). Animate ({         width:  newheight -  (newheight - height)  +  ' px ',          height: newWidth -  (newwidth - width)  +  ' px ',          fontSize:  ' 16px ',          opacity: 1  //transparency     }); });
	Plus the speed and callback functions		$ ('. Animate '). Click (function () { $ (' #box '). Animate ({ ' Width ': ' 300px ', ' Height ': ' 200px ' }, +, function () { Alert (' animation execution finished executing me! ‘); }); });
	Move in other directions	<input type= "button" class= "Pushbutton" value= "buttons"/> <div id= "box" > Box </div>	css Code: <style type= "Text/css";     # box {      width:100px;      height:100px;      background:red;      position:absolute;     } </style>                    $ ('. Button '). Click (function  ()  {      $ (' #box '). Animate ({         left:  ' 300px ',//+= 100px moving backwards         top:  ' 200px '     },   ' slow '); });

jquery animation effects