JQuery animation and special effects

JQuery animation and special effects

This article mainly explains and learns about jQuery's automatic explicit and hidden functions, such as getting in and out.

1. show and hide () and show ()

For animations, display and hide are one of the most basic effects. This section briefly introduces jQuery's display and hide functions.

The Code is as follows:

<Script type = "text/javascript">
$ (Function (){
$ ("Input: first"). click (function (){
$ ("P"). hide (); // hide
});
$ ("Input: last"). click (function (){
$ ("P"). show (); // display
});
}); </Script>
<Input type = "button" value = "Hide">
<Input type = "button" value = "Show">
<P> click the button to check the effect. </p>
<Div> <em> This section describes how to downgrade and learn jQuery's automatic explicit and hidden functions. This section gradually fades in and out and flies in and out. Custom Animation. 1. show and hide () and show () are one of the most basic effects for animations. This section briefly introduces jQuery's display and hide. </Em> </div> the above is a test of the hide () and show () functions.

2. Use the show (), hide (), and toggle () Methods

In the previous example, the show () and hide () methods are briefly introduced. In fact, these two methods can accept Parameter Control for explicit hiding.
Syntax:

Show (duration, [callback]);
Hide (duration, [callback]);
Duration indicates the length of the animation execution time and the speed string, including slow, normal, and fast. It can also be an integer (in milliseconds) that represents the time ). Callback is an optional callback function. After the animation is completed, execute it.

The Code is as follows:

<Script type = "text/javascript">
$ (Function (){
$ ("Input: first"). click (function (){
$ ("P"). hide (300); // hide
});
$ ("Input: last"). click (function (){
$ ("P"). show (500); // display
});
});
</Script> the example is the same as the first example, but the time parameter is added to hide () and show. In fact, toogle () can also be added with event parameters.

3. Use the fadeIn () and fadeOut () Methods

JQuery also provides the fadeIn () fadeOut () method for hiding the animation effect. Their animation effect is similar to fading, and the syntax is identical to slow () and hide.

FadeIn (duration, [callback]);
FadeOut (duration, [callback]);

 

The Code is as follows:

<Script type = "text/javascript">
$ (Function (){
$ ("Input: eq (0)"). click (function (){
$ ("Img"). fadeOut (3000); // gradually fadeOut
});
$ ("Input: eq (1)"). click (function (){
$ ("Img"). fadeIn (1000); // gradually fadeIn
});
});

</Script>

<Input type = "button" value = "Hide">
<Input type = "button" value = "Show">

Use of the fadeTo () method.

The fadeTo () method gradually changes the opacity of the selected element to the specified value.

<Script type = "text/javascript">
$ (Function (){
$ ("Input: eq (0)"). click (function (){
$ ("Img"). fadeOut (1000 );
});
$ ("Input: eq (1)"). click (function (){
$ ("Img"). fadeIn (1000 );
});
$ ("Input: eq (2)"). click (function (){
$ ("Img"). fadeTo (1000, 0.5 );
});
$ ("Input: eq (3)"). click (function (){
$ ("Img"). fadeTo (1000, 0 );
});
}); </Script>
<P> </p>
<Input type = "button" value = "FadeOut">
<Input type = "button" value = "FadeIn">
<Input type = "button" value = "fadeto0.5">
<Input type = "button" value = "FadeTo 0">

FadeOut Parameters

Speed
Optional. Specifies the speed at which the element ranges from the current transparency to the specified transparency.

Possible values:

Millisecond (e.g. 1500)
"Slow"
"Normal"
"Fast"
Opacity is required. Specifies the transparency to fade in or out. It must be a number between 0.00 and 1.00.
Callback
Optional. The function to be executed after the fadeTo function is executed.

To learn more about callback, visit our jQuery Callback chapter.

This parameter cannot be set unless the speed parameter is set.