Examples of using common special effects methods in jquery

Examples of using common special effects methods in jquery_jquery

WBOY

Release： 2016-05-16 16:51:24

Original

1212 people have browsed it

1. jQuery fadeIn() is used to fade in hidden elements.

Syntax:

Copy code The code is as follows:

$(selector).fadeIn( speed,callback);

Example:

Copy code The code is as follows:

$("button"). click(function(){
 $("#div1").fadeIn();
 $("#div2").fadeIn("slow");
 $("#div3"). fadeIn(3000);
});

2. The jQuery fadeOut() method is used to fade out visible elements.

Syntax:

Copy code The code is as follows:

$(selector).fadeOut( speed,callback);

3． The jQuery fadeToggle() method switches between the fadeIn() and fadeOut() methods.

fadeToggle() adds a fade-in effect to the element if it is already faded out.

If the element is already faded in, fadeToggle() adds a fade out effect to the element.

Syntax:

Copy code The code is as follows:

$(selector).fadeToggle( speed,callback);

Example: $("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow") ;
$("#div3").fadeToggle(3000);
});

4. Syntax:

$(selector).fadeTo(speed,opacity,callback);

The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The required opacity parameter in the fadeTo() method sets the fade effect to the given opacity (a value between 0 and 1). Example

Copy code The code is as follows:

$("button").click(function( ){

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeTo("slow",0.4);

$("#div3").fadeTo("slow",0.7);

});

5. The jQuery slideDown() method is used to slide elements down.

Syntax:

Copy code The code is as follows:

$(selector).slideDown( speed,callback);

Copy code The code is as follows:

$("#flip").click(function( ){
 $("#panel").slideDown();
});

6. The jQuery slideUp() method is used to slide elements up.

Syntax:

Copy code The code is as follows:

$(selector).slideUp( speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function to be executed after the sliding is completed.

7. The jQuery slideToggle() method can switch between the slideDown() and slideUp() methods.

If elements slide down, slideToggle() slides them up.

If elements slide up, slideToggle() slides them down.

Copy code The code is as follows:

$(selector).slideToggle(speed,callback);

8. The jQuery animate() method is used to create custom animations.

Syntax:

Copy code The code is as follows:

$(selector).animate( {params},speed,callback);

The required params parameter defines the CSS properties that form the animation.

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function to be executed after the animation is completed.

It is also possible to define relative values (the value is relative to the element's current value). You need to add = or -= in front of the value:

You can also define a group of animates to implement the queue function.

The following example demonstrates a simple application of the animate() method; it moves the

element to the left until the left attribute equals 250 pixels:

Example

Copy code The code is as follows:

$("button").click (function(){
 $("div").animate({left:'250px'});
}); 
 

9. The jQuery stop() method is used to stop animations or effects before they complete

10. When the animation is 100% completed, call the Callback function.

Typical syntax:

Copy code The code is as follows:

$(selector). hide(speed,callback)

11. jQuery method link

Some elements only need to be obtained once, so you can use links to append methods.

It’s the method point method. For example,

Copy code The code is as follows:

$("#p1").css(" color","red").slideUp(2000).slideDown(2000);