jquery basic animation review
.hide () | Hide animation |
.show () | Appear animation |
.toggle () | Toggle display status |
.slideup ()/down () | Pull down/roll up animation |
.slidetoggle () | Pull down roll up switch |
.fadein ()/out () | Fade In/Out Animation |
.fadetoggle () | Fade in and out switching |
.fadeto () | Transparency changes to the specified transparency,The parameters are (duration, opacity) |
.animate () | Control css animation, parameters (properties, option) |
.stop () | Stop animation execution |
Note:
1, optional parameters,The duration of the animation and the callback function after the end,The duration can also be replaced by "slow"/"fast". E.g
$("#t"). hide (3000, function () {
alert ("callback function");
})
//You can also set parameters in json format
$("#t"). hide ({
duration:3000, complete:function () {
alert ("callback function");
}
})
2. The parameters of the option attribute in animate are {duration, easing, step, progress, complete}
duration-set the duration of the animation easing-specifies the easing function to use, which easing function to use for the transition,Built-in linear change,swing curve changes,If you need other changes, you need to import the library step:specifies the function to be executed after each step of each animation is completed progress:This callback will be executed every time the animation is called,Is a concept of progress complete:Animation completion callback$("#elem"). animate ({//Add 100px to the existing height and width
width:"+=100px", height:"+=100px"
}, {
duration:5000, //Complete execution within 5 seconds
specialeasing:{
width:"linear", //linear transition effect
height:"easeoutbounce"
}, complete:function () {
$(this) .after ("<div>Animation finished!</div>");
}
});
3. stop ():only the first animation will be stopped,Continue later
stop (true):stop all animations stop (true ture):stop the animation,Jump directly to the final state of the first animationRelated articles
- Example of jQuery custom animation operation using animation queue
- Detailed JQuery basic animation operations
- jQuery to achieve the transition page transition animation effect
- Use show () and hide () method to animate show and hide pictures in Jquery
- Detailed explanation of jQuery animation and special effects
- jQuery plugin Slider Revolution achieves responsive animation sliding picture switching effect
- Analysis of complete examples of jQuery operation animation