Summary of dynamic effects in jquery_jquery-JS Tutorial-php.cn

Summary of dynamic effects in jquery_jquery

WBOY

Release： 2016-05-16 18:13:38

Original

1007 people have browsed it

Animation effects, if used comprehensively, can also be used to simply implement the effects of various jquery plug-ins using simple codes

This article refers to the book "A Brief Talk on jquery", organizes it, and combines it with my own reality It is based on experience and can be regarded as a learning manual
The code was all messed up when editing. I reorganized it. The code format may still be a bit messy. Please forgive me
Show, hide and combination (toggle) Effect
1.show(speed,callback);
Explanation: This method can display hidden elements, and the parameters are also default, that is, written in the form of show()
speed --- There are 3 parameters to specify the display speed. You can choose slow, normal, fast, or you can specify the number yourself (unit: milliseconds)
callback---callback function
The following is a simple example

Copy code The code is as follows:

 
var callback=function(){ //alert("I am the callback function") ; 
} 
var f1=function(){ 
// $("#t1").show(); Parameter default
// $("#t1").show( "fast",callback); The display speed is fast mode
$("#t1").show(3000,callback);//Customized display speed 3000 milliseconds
}; 
$("# b1").click(f1); 

Html code

Copy code The code is as follows:

2 hidden(speed,callback);
Note: In contrast to the show method, used to hide elements, the parameters are the same as show, please refer to 3.1
The following example is to click a button to hide the displayed div

Copy the code The code is as follows:

 
var callback=function(){ //alert("I am the callback function"); 
} 
var f1=function(){ 
// $("#t1").hide() ; Parameter default
// $("#t1").hide("fast",callback); Display speed is fast mode
$("#t1").hide(3000,callback);/ /Custom display speed 3000 milliseconds
}; $("#b1").click(f1); 

Html code

Copy code The code is as follows:

3 toggle(speed,callback)
Explanation: This can be understood as show() and hide () method, alternately execute show() and hide()
For example: the page has a hidden element, the first time toggle() is executed, the element is displayed, the second execution is executed, the element is hidden, and the third time The element is displayed again. . .
The parameters are the same as 3.1

Copy code The code is as follows:

 
var callback=function (){ //alert("I am a callback function"); 
} 
var f1=function(){ 
//$("#t1").toggle(); // Parameter missing Save
//$("#t1").toggle("fast",callback); //Display speed in fast mode
$("#t1").toggle(3000,callback); 
}; 
$("#b1").click(f1); 

Html code

Copy code The code is as follows:

2. The sliding effect of elements (expand downwards, shrink upwards)
1 .slideDown(speed,[callback]);
Description: Change the height of the object to achieve a downward expansion animation effect, commonly used to display hidden elements

Copy Code The code is as follows:

 
var callback=function(){ //alert("I am a callback function"); } 
var f1=function( ){ 
//$("#t1").slideDown(); // Parameter default
//$("#t1").slideDown("fast",callback); //Display speed For fast mode 
$("#t1").slideDown(1000,callback); 
}; 
$("#b1").click(f1); 

Html code

Copy code The code is as follows:

2.slideUp(speed,[callback]););

Description: Change the height of the object to achieve an upward expansion animation effect, commonly used to hide displayed elements

Copy code The code is as follows:

var callback=function(){
//alert ("I am the callback function");
}
var f1=function(){
//$("#t1").slideUp();
//Default parameters// $("#t1").slideUp("fast",callback); //The display speed is fast mode
$("#t1").slideUp(1000,callback);
};
$("#b1").click(f1);

3.slideToggle(speed,[callback]););

Explanation: It can be said to be a synthesis of the above two methods, which can replace toggle(); if you have carefully read the introduction of the above methods, you should know how to use them. In fact, these methods The usage and parameters are the same, but the display form is different. I won’t write the example

Fade in and out effect of three elements

1.fadeIn(speed,[callback]);

Description: Implement fade-out effect, used to display hidden elements

2.fadeOut(speed,[callback]);

Description: Implement fade-in effect, used to hide displayed elements

3, fadeTo(speed,opactity,callback);

Description: This method is used to change the transparency of the displayed element

Parameters: speed, callback have the same parameters as other animation methods introduced above. The opactity parameter represents transparency, and the value range is 0-1

Copy code The code is as follows:

var callback=function(){
//alert("I am Callback function");
};
var f1=function(){ $("#t1").fadeTo(1000,0.3,callback);//0.3 is 30% transparency
};
$("#b1").click(f1);

4. Custom animation

Note: As you can see from the previous one, two, and three, the display of elements includes show, slideDown, fadeIn, and the hidden animation effects of hide, slideUp, and fadeOut

, combine effects toggle, slideToggle, change transparency effect fadeTo, we can also customize some animation effects if needed

How to use custom animation: animate(params,speed,callback);

Parameter description: params---a set of style attributes and their values as animation attributes and final values

speed----Same as the speed attribute in the method introduced earlier

callback---callback function

Note: The style attributes of params must be written in camel case, that is, margin-left should be slightly smaller than marginLeft.

The following is an example

Copy the code The code is as follows:

 
var callback =function(){ 
//alert("I am a callback function"); 
} ; 
var par={ height: "70%" }; 
var f1=function(){ 
$("#t1").animate(par,1000,callback); 
}; 

$("#b1").click(f1); 

Html code

Copy code The code is as follows: