jQuery animation

Animate hide and show

hide 

$(selector).hide(speed,callback)//Hide

 

$(selector).show(speed,callback)//Display

 The speed parameters are: slow fas normal milliseconds

example:

$(function(){
 $("button").click(function(){
 
    $("p").hide(1000,function(){
    
        $("p").show(1000);
    
    })
 
 
 })



})

 
Toggle and slide
$(select).toggle(speed,callback); //Switch function
toggle() function uses show() or hide() function to switch HTML elements, the same button can be clicked
twice to achieve hidden and displayed effect, in fact, some specific uses can replace them

$(selector).slideDown(speed,callback); // slide down and show occlusion

 

$(selector).slideUp(speed,callback);// Slide up and hide the occlusion

 

$(selector).slideToggle(speed,callback);// Slide up and down to switch

example

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});

html code
<div class="panel">
<p>La la la la</p>
<p>123456</p>
</div>
 
<p class="flip">Tap to try</p>

fadeOut reduces the opacity of the element for a specified period of time until the element disappears completely fadeIn does the opposite

$(selector). fadeOut(speed,callback) // fade to empty

 

$(selector). fadeIn(speed,callback) //bright to all

 

$(selector). fadeTo(speed,opacity,callback) //Fade to the specified effect opacity brightness directly between 0.0 ~ 1.0

 

$(selector).animate({params},duration,easing,callback)  //动画

 
params: The CSS effect after the change, such as: {height:300}
duration: The speed of change in milliseconds
easing: The name of the change effect (