JQuery: Animation (show hide, fade in and out, slide)

1. Show/hide

Hide (duration: String, easing: String, callback: Function): hide the element.
show (duration: String, easing: String, callback: Function): display the element.
toggle (): toggle, hide the element when it is displayed, or display it when it is hidden.

The above three methods can pass parameters:

duration: Specify the duration of the transition animation, the default is 400, you can also write fast(200) or slow(800)
easing: Specify what animation effect to use, the default is swing (swing effect-swing), and linear (linear)
complete: Specifies the function to be executed after the animation effect is completed

2. Fade in/fade out

fadeIn(): Used to fade in hidden elements
fadeOut(): used to fade out visible elements
fadeToggle(): switch between fadeIn() and fadeOut() methods
fadeTo(speed,opacity,callback): gradually change the opacity of the selected element to the specified value.

3. Sliding

Insert picture description here
The parameters of these three methods can be passed inThe speed at which the animation completesorCallback

4. Custom animation animate()

The animate() method executes a custom animation of the CSS property set.

This method uses CSS styles to change elements from one state to another. CSS property values are gradually changed so that animation effects can be created.

Only numeric values can be animated (such as "margin:30px"). String values cannot be animated (such as "background-color:red").

Note: Use "+=" or "-=" to create relative animations.

$("button").click(function(){
    
     
	$("div").animate({
    
     
		left:'250px',
		opacity:'0.5',
		height:'150px',
		width:'150px'
 	}); 
});

Insert picture description here
Possible values for style:

backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
Note: CSS styles are set using DOM names (such as "fontSize") instead of CSS names (such as "font-size").

5、stop

(1) Function: Stop the currently running animation.
(2) Grammar:$(selector).stop(stopAll,goToEnd)
Insert picture description here