jQuery simple animation effect-JS Tutorial-php.cn

1. show() displays animation

Syntax: show(speed,callback) Number/String, Function speed is the animation execution time, The unit is milliseconds. It can also be slow", "normal", "fast" callback is optional and is a function executed when the animation is completed.

show(speed,[easing],callback)Number/ String easing defaults to swing (easing animation, gradually getting faster as the animation begins), optional linear (steady animation, each frame is the same rate);

("#p1").show(3000,function(){ alert("Animation display completed!"); });

2. hide() hidden effect

## Syntax: hide(speed,callback) Number/String,Function

　hide(speed,easing,callback) Number/String parameters are the same as the parameter types and definitions of show. Please refer to show

##　 $("#p1").hide( 3000,function(){ alert("Animation hiding completed") });

##3.toggle () Hide and display automatically switch. When it is currently displayed, it is hidden. When it is currently hidden, it is displayed ## Syntax: toggle(speed,callback) Number/String, Function

##　　　toggle(speed,callback)　Number/String,String,Function

##　　$("#p1").toggle(3000, function(){ alert("Animation effect switching completed") });

##4. slideDown( ) displays downwards, slow() expands horizontally and vertically at the same time, while slideDown only expands downwards in the vertical direction

Syntax: slideDown(speed, callback) Number/String,Function slideDown(speed,[easing],callback) Number/String,Function

## $("# p1").slideDown(3000,function(){ alert("Expand downward display successfully!"); });

5. slideUp() hides upwards. hide() operates in both horizontal and vertical directions, while slideUp() only hides upwards in the vertical direction

Syntax: slideUp(speed,callback) Number/String,Function slideUp(speed,[easing],callback) Number/String,String,Function

　　$("#p1").slideUp(3000,function(){ alert("Successfully hidden up!"); })

6. SlideToggle switches in the vertical direction. The toggle is in both horizontal and vertical directions, while the slideToggle is only in the vertical direction.

Syntax: slideToggle(speed,callback) Number/String,Function

## slideToggle(speed,[easing],callback) Number/String,String,Function

##　　 $("#p1").slideToggle(3000,function(){ alert("Horizontal switching successful"); });

7. fadeIn() changes the transparency to display

Syntax: fadeIn(speed,callback) Number/String,Function

fadeIn(speed,[easing],callback) Number/String,Function

$("#p1").FadeIn(3000,function(){ alert ("Fade in successfully!"); });

8. fadeOut() to change transparency To hide

Syntax: fadeOut(speed,callback) Number/String,Function

fadeOut(speed,[ easing],callcack)　 Number/String,String,Function

##　　 $("#p1").fadeOut(3000,function(){ alert("Fade out and hide successfully!"); });

##9. fadeToggle() changes the transparency to switch the display and hidden state

Syntax: fadeToggle(speed,callback) Number/String,Function

fadeToggle(speed,[easing],callback) Number /String,Function

　　 $("#p1").fadeToggle(3000,function(){ alert("Fade switch successful!"); });

##10. fadeTo() changes the transparency to the specified transparency at the specified time

Syntax: fadeTo(speed,callback) Number/String,Function

fadeTo([speed],opacity,[easing],[fn]) Number/String,Float ,String,Function,opacity means that the transparency value is from 0-1

　　　$("#p1").fadeTo(3000,0.22,function(){ alert("Transparency changed Success!"); });

11. animate() Custom animation, generally speaking Digital changes can be used for animation. Syntax: animate(params,speed,easing,callback); Style parameters, time, optional, function

　　　$("#p1").animate({width:300px,height,300px},3000);

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 appropriatelygene Numbery, the params should be enclosed in square brackets, and you can use css Style parameters. Be careful to use the camel rule, for example, font-size should be written as fontSize. Color gradients are not supported.

background Position
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent

12. stop() stops Execute animation

## Stop([clearQueue],[gotoEnd]); Both parameters are Boolean values. The first one indicates whether to stop animation execution. The two represent, if stopped, whether it will immediately change to the state of completion of execution. If set to no, it will stay in the state of half execution.

　$("#p1").hide(5000)　//This animation is being executed

　$("#p1"). stop(); //The animation specified in the previous line of code stops in half state

　$("#p1").stop(true,true); //Stop the current animation and at the same time The animation switches to the completed execution state.

13. delay() delays the execution of animation. When an animation stops(), you can still use delay. () to delay execution. Execution continues where it left off. Of course, it is not possible to continue execution using the original method, but there is no delay effect.

## delay(duration,[queueName]) Set a delay value to execute animation

Integer,String

　$("#p1").delay(3000).hide(3000); //Indicates that hide(3000) will be executed after 3000 milliseconds;

14. jQuery.fx.off //This property is only whether to turn off the animation on the current page. After turning off the animation, there will be no animation effect. All animations with execution time set will be completed instantly. . Note where this attribute appears. Different locations have different effects.

　$(function(){

jQuery.fx.off = true; //Property outside the event , valid for all animations executed after the page is loaded

　　$("#p1").click(function(){　//If the attribute is written here, it will only be invalid for the current click event , does not affect the animation of other events

##　　　$("#p1").hide(3000); //Note that since jQuery.fx.off is set to true, it expires in 3000 milliseconds. Equivalent to hide();

　　});

##　})

15. jQuery.fx.interval //This property sets the frame rate of the animation in milliseconds. The smaller the time, the smoother it will be. , the position where the attribute appears also affects the range ##　 $(function(){

　 jQuery.fx.interval = 1000;

　　　$("#p1").click(function(){　　

##　　　$("#p1").hide (3000); //jQuery.fx.interval is set to 1000, which is 1 second, and the effect is changed once.

##　　});

　 })

The above is my simple understanding of some basic animations of jq. I have made some accumulation here. I also hope to help compatriots who have just come into contact with jq. I hope it can be of some help to you. If there is anything that needs to be added, I will add it one by one in the following time. I also hope that the experts can actively put forward any suggestions they have.

The above is the detailed content of jQuery simple animation effect. For more information, please follow other related articles on the PHP Chinese website!