JQuery animation effects

in the past a long time, the various effects on the Web page also need to use flash in progress. In recent years, however, we have seen little of this, and most have used JavaScript animations instead of Flash. Instead of animation, this replaces the Web Effects section. Web effects such as: Gradient menu, progressive display, picture carousel, etc., and animation such as: storyline ads, MV and so on. A Show, Hide

The method shown in JQuery is: .show() , the Hidden method is: .hide() . In the absence of parameters, only hard to display content and hidden content.

 $ ( " .show      " .hide    

Note: The .hide() method is actually set the CSS code in the line:, and the method depends on whether the display:none .show() original element is block or inline, if it is a block, set the CSS code: display:block ; If it is inline, set the CSS code: display:inline ;.

The .show() and .hide() method can pass a parameter that controls the speed in milliseconds (1000 milliseconds equals 1 seconds). And it's rich in the constant speed and size, and the transparency transformation.

$ ('. Show'). Click (function () {$ ('#box'). Show ( // the display took 1 seconds});    $ ('. Hide'). Click (function () {$ ('#box'). Hide (  + // hidden for 1 seconds});    

In addition to the direct use of milliseconds to control speed, JQuery offers three preset speed parameter strings: slow, normal, and fast, corresponding to 600 milliseconds, 400 milliseconds, and 200 milliseconds, respectively.

 $ ( " .show   '). Click (function () {$ ( "  #box  Span style= "color: #800000;" > ' ). Show ( fast   ' ); //   200 milliseconds});  $ ( " .hide   '). Click (function () {$ ( "  #box  Span style= "color: #800000;" > ' ). Hide ( slow   ' ); //  600 milliseconds}); 

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 (), some condition judgments are required if a button switch operation is required. 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()和.slideToggle() . As the name implies, pinch up (scroll) and expand downward (swipe).

$ ('.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: fade in, .fadeIn()和.fadeOut() fade out, and, of course, a way to switch automatically: .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 there is no way. And JQuery provides a way to solve this problem .fadeTo() .

$ ('. Toggle'). Click (function () {       $ ('#box'). FadeTo ('slow',0.33//0.33 indicates a value of   

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 don't meet our more complex needs. This time, JQuery provides a .animate() way to create our custom animations to meet more complex and varied 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, already has four CSS changes, has realized the multi-animation synchronous motion effect. Must pass the parameter only one, is a key value to the CSS change style the object. There are also two optional parameters, the speed and the callback function, respectively.

$('. 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 motion-state displacement, you must use custom animations and combine the absolute positioning of the CSS.

$('. Animate'). Click (function () {$ ('#box'). Animate ({'Top':'300px',//CSS Absolute positioning must be set first        ' Left':'200px'       });  }); 

In custom animations, each start motion must be the initial position or initial state, and sometimes we want to animate it by the current position or state. JQuery provides the added and reduced functionality of custom animations.

$ ('. Animate'). Click (function () {       $ ('#box' ) '  Left ':'+=100px',});  

There are two ways to customize the implementation of queued animations:
1. Perform an animation again in the callback function.
2. Use concatenating or order 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' });       });   }); });

JQuery animation effects