Animating the Javascript-jquery object

first, Show and hide the animation effect

1.hide (animation duration, easing used to specify the transition effect, the completion of the animation call function);

$ ("p"). Hide ("swing", function () {statement body});

2.show (animation duration, easing used to specify the transition effect, the completion of the animation call function);

$ ("p"). Show (, "swing", function () {statement body});

3.toggle (animation duration, Easing is used to specify the transition effect, the animation completes the call function); toggle the current show/hide State.

$ ("p"). Toggle ("slow");

second, fade in and fade out animation effect

FadeOut (animation duration, easing used to specify the transition effect, the completion of the animation call function);

Method: changes the opacity of the current element and eventually displays the current Element.

$ ("p"). FadeOut ("slow");

2.fadeIn (animation duration, easing used to specify the transition effect, the completion of the animation call function);

Method: changes the opacity of the current element and eventually hides the current Element.

$ ("p"). fadeIn ("slow");

3.fadeToggle (animation duration, easing used to specify the transition effect, the completion of the animation call function);

Method: toggles the opacity of the current element

$ ("p"). Fadeoggle ("slow");

4.fadeTo () method: Adjusts the current element to the specified opacity

$ ("p"). fadeTo ("slow", 0.5);

third, the effect of marking and drawing

1.slideUp (animation duration, easing used to specify the transition effect, the completion of the animation call function);

Method: dynamically change the height of the current element, finally hide the current element, at this time display:none;

$ ("p"). slideup ("slow");p element in 0.6 seconds.

2.slideDown (animation duration, easing used to specify the transition effect, the completion of the animation call function);

Method: changes the height of the current element and eventually displays the current Element.

$ ("p"). Slidedown ("slow");//p element is crossed within 0.6 seconds

3.slideToggle (animation duration, easing used to specify the transition effect, the completion of the animation call function);

Method: Toggles the height of the current Element.

$ ("p"). slidetoggle (); switch within 0.4 seconds

Iv. Custom Animation effects

1.animate (): method changes the current Element's CSS Properties.

Syntax: animate ({property to be changed: value}, animation duration, easing used to toggle effect, animation execution finished call function);

$ ("p"). Animate ({"width": "200px"},narmal);

$ ("p"). anmiate ({"left": "+=300px"});

2. Delay the animation queue

Syntax: delay (animation time); can be slow, normal, fast

$ ("p"). delay (. animate ({"left": "300px"}). animate ({"height": "100px"});//

-after a delay of 1 seconds, the P element to the right within 0.4 seconds makes the CSS property left value 300px. The P element then zooms in at a height of 100px within 0.4 seconds.

3. Abort the animation queue

Syntax: Stop (whether you want to empty the animation queue that is not finished, whether to jump to the end of the animation you are performing directly); the default value for two parameters is false;

Animating the Javascript-jquery object