Some common special effects methods and usage examples that jquery must know (organized)

This article has compiled some commonly used special effect examples, such as: .jQuery fadeIn() is used to fade in hidden elements. The jQuery fadeToggle() method can be used between the fadeIn() and fadeOut() methods. To switch, etc., interested friends can refer to

1.jQuery fadeIn() is used to fade in hidden elements.
Syntax:
$(selector).fadeIn(speed,callback);
Example:

Copy code The code is as follows:

$("button").click(function(){ $("#p1").fadeIn(); $("#p2").fadeIn("slow"); $("#p3" ).fadeIn(3000);});

2.jQuery fadeOut() method is used to fade out visible elements.
Syntax:
$(selector).fadeOut(speed,callback);

3.jQuery fadeToggle() method can switch between fadeIn() and fadeOut() methods.
If the element is already faded out, fadeToggle() will add a fade in effect to the element.
If the element is already faded in, fadeToggle() will add a fade out effect to the element.
Syntax:
$(selector).fadeToggle(speed,callback);
Example:

Copy code The code is as follows:

$("button").click(function(){ $("#p1").fadeToggle(); $("#p2").fadeToggle("slow"); $("#p3" ).fadeToggle(3000);});

Here I want to say that generally jquery has an inverse and reversible method to achieve the synthesis of a single method. The same goes for the one below moving up and down.

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(){
$("# p1").fadeTo("slow",0.15);
$("#p2").fadeTo("slow",0.4);
$("#p3").fadeTo("slow", 0.7);
});

5.jQuery slideDown() method is used to slide elements down.
Syntax:
$(selector).slideDown(speed,callback);
$("#flip").click(function(){ $("#panel").slideDown();} );

6.jQuery slideUp() method is used to slide elements up.
Syntax:
$(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 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.
$(selector).slideToggle(speed,callback);

8.jQuery animate() method is used to create custom animation.
Syntax:
$(selector).animate({params},speed,callback);
Required params parameters define 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.
You can also define relative values ​​(the value is relative to the current value of the element). 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 is equal to 250 pixels:
Example

Copy code The code is as follows:

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

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

10. When the animation is 100% complete, the Callback function is called .
Typical syntax:
$(selector).hide(speed,callback)

11.jQuery method link
Some elements only need to be obtained once, so you can use the link to append the method .
is the method point method. Such as
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

The above is the detailed content of Some common special effects methods and usage examples that jquery must know (organized). For more information, please follow other related articles on the PHP Chinese website!