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

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

WBOY

Release： 2016-05-16 17:31:47

Original

1165 people have browsed it

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(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow "); $("#div3").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.
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:
$(selector).fadeToggle(speed,callback);
Example:

Copy code The code is as follows:

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

Here I want to say that generally jquery has a negation 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( ){ 
$("#div1").fadeTo("slow",0.15); 
$("#div2").fadeTo("slow",0.4); 
$("#div3 ").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 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.
$(selector).slideToggle(speed,callback);

8. The jQuery animate() method is used to create custom animations.
Syntax:
$(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 is equal to 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 are completed

10. When the animation is 100% complete After that, 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 .
It’s the method point method. Such as
$("#p1").css("color","red").slideUp(2000).slideDown(2000);