Home>

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 animation
  • Previous Analysis of Abstract Class Principle and Usage in Java
  • Next Use tqdm to display Python code execution progress function
  • Trends