Getting Started with jquery (7) animation effect

First, show and hide
Use the Hide () and show () methods in jquery to hide and display HTML elements:

The syntax form of Hide (): $ (selector). Hide (Speed,callback);

The syntax form of Show (): $ (selector). Show (Speed,callback);

The speed parameter specifies the rate of concealment/display, which can take the following values: "Slow", "fast", or milliseconds. The callback parameter is the function name that is executed after hiding or displaying, and two parameters are optional.

Examples are as follows:

<script type="Text/javascript">$ (function   ()  { $ (" #hide "). Click (< Span class= "Hljs-keyword" >function   ()  { $ (  "div" ).    Hide (1000 );    }); $ ( "#show" ). Click ( function   ()  { $ ( "div" ). Show (1000 ); });}) $ (function   ()  { //remove the href attribute in the A tag  $ ( "#a1" ). Removeattr ( "href" );}) </script>... Omit code<h3>Hide and show</h3><input type="button" id="Hide" value=" Click the Hide><input type="button" id="Show" value= "Click to display"><div>Running under the sunset, that is my lost youth.</div>

Ii. fade in and fade out
In jquery, you can implement the fade-out effect of an element. jquery offers four ways to fade: FadeIn () fades in hidden elements, FadeOut () for fading out visible elements, Fadetoggle () for switching between FadeIn () and FadeOut () methods, FadeTo () Allows the gradient given opacity (values between 0 and 1)

FadeIn () Syntax: $ (selector). FadeIn (Speed,callback);

FadeOut () Syntax: $ (selector). FadeOut (Speed,callback);

Syntax for Fadetoggle (): $ (selector). Fadetoggle (Speed,callback);

Syntax for FadeTo (): $ (selector). FadeTo (Speed,opacity,callback);

Examples are as follows:

<script type="Text/javascript">$( function(){//fadein () method$("button"). Click ( function(){$("#div1"). FadeIn (); $("#div2"). FadeIn ("Slow"); $("#div3"). FadeIn ( the); });}) $( function(){//fadeout () method$("button"). Click ( function(){$("#div1"). FadeOut (); $("#div2"). FadeOut ("Slow"); $("#div3"). FadeOut ( the); });}) $( function(){//fadetoggle () method$("button"). Click ( function(){$("#div1"). Fadetoggle (); $("#div2"). Fadetoggle ("Slow"); $("#div3"). Fadetoggle ( the); });}) $( function(){//fadeto () method$("button"). Click ( function(){$("#div1"). FadeTo ("Slow",0.15); $("#div2"). FadeTo ("Slow",0.4); $("#div3"). FadeTo ("Slow",0.7); });})</script>

Three, sliding effect
In jquery, you can create a slide effect on an element. jquery offers three fade methods Slidedown () slide down elements, Slideup () to slide up elements, Slidetoggle () to toggle between Slidedown () and Slideup () methods.

Slidedown () Syntax: $ (selector). Slidedown (Speed,callback);

Slideup () Syntax: $ (selector). Slideup (Speed,callback);

Syntax for Slidetoggle (): $ (selector). Slidetoggle (Speed,callback);

The parameter speed specifies the length of the effect, which can be value: "Slow", "fast", or milliseconds. The callback parameter is the name of the function that is executed after the slide is completed.

Examples are as follows:

<script type="Text/javascript">$( function(){//slidedown () method$("button"). Click ( function(){$("#div1"). Slidedown ("Slow"); });}) $( function(){//slideup () method$("button"). Click ( function(){$("#div2"). Slideup ("Slow"); });}) $( function(){//slidetoggle () method$("button"). Click ( function(){$("#div2"). Slidetoggle ("Slow"); });})</script>

Four, animation effect
In jquery, the Animate () method is provided to create a custom animation

Syntax: $ (selector). Animate ({params},speed,callback);

The params defines a CSS property that forms an animation for the required parameters. Speed and callback are optional parameters that specify the duration of the effect, with the values: "Slow", "fast", and milliseconds, which is the function name that is executed after the animation is completed.

Examples are as follows:

<script type="Text/javascript">$ (function   ()  { //add all the attributes in the form to the available element categories  $ (  "#btn" ). Click (function   ()  { $ (). Animate ({height: "200px" , Width:  "660px" }, "slow" , function   ()  { $ (" div "). Animate ({height:, Width:  "80px" }, "slow" )}); })})</script>

Five, stop effect
In jquery, the Stop () method is provided to stop animations or effects before they are complete. The Stop () method applies to all jquery effect functions, including sliding fades and custom animations.

Syntax: $ (selector). Stop (Stopall,gotoend);

Both the StopAll and Gotoend parameters are optional. The former specifies whether the animation queue should be cleared, the default is false, that is, only the animated animation is stopped, and any queued animation is allowed to execute backwards; the latter specifies whether the current animation is completed immediately, and false by default.

So the default stop () clears the current animation specified on the selected element

Examples are as follows:

<script type="Text/javascript">$ (function(){ $ ("#flip"). Click (function(){ $ ( "#panel").    Slidetoggle (the);    });    $ ("#stop"). Click (function(){ $ ("#panel"). Stop (); });})</script><h3>Animation effects</h3><button id="Stop">Stop sliding</button><div id="Flip">Click here to slide down the panel</div><div id="Panel">Hello world!</div>

Getting Started with jquery (7) animation effect