1. Animation DOM and CSS operation
Principle: at a fixed time interval (for example, 0.1 seconds), change the CSS style of DOM elements a little (for example, increase the height and width by 10% respectively)

2. Custom animation
animate() can achieve any animation effect. The parameters to be passed are the final CSS state and duration of DOM elements (ms, optional parameters)
Changing elements from one state to another through CSS Styles
Only numeric values can create animation (for example“ margin:30px "), string value cannot create animation (such as" background "- color:red ")

var div = $('#test-animate');
div.stop().animate({//Because the animation has a duration, in order to prevent the operation from being too fast, first stop the original animation and then start a new animation
	opacity:0.25,//If the attribute value is a numeric value, you can not add quotation marks. If there are characters in the attribute value, you need to add quotation marks, otherwise the error report will not take effect
	width:'256px',//If you only enter 256, you can do it without quotation marks. The default unit is px
	height:'256px',
	fontSize:'16px'//Pay attention to hump form
},3000);//Pass in css parameters as objects. You should have defined different attribute values before you can change them

delay() for animation pause (delay)

//Chain animation
$('div').stop()
.animate({'width':'0%'},1000)
.delay(3000)//Delay playback of subsequent animation
.animate({'width':'100%'},1000);

3. Animation function
show()/hide()
Calling show() and hide() directly in the form of no parameters will show and hide DOM elements, but as long as a time parameter is passed in, it will become an animation (changing transparency and width and height at the same time)
show() is applicable to elements hidden by jQuery (hide(), fadeOut(), slideUp()), or declared in CSS display:none Element of (not applicable to V isibility:hidden Elements of)

var div = $('#test-animate');
div.stop().hide(3000);//Gradually disappear in 3 seconds

show( fast | normal | slow)
You can also pass in three keywords, which slows down from left to right

Toggle (fast | normal | slow) -- act on a single element
show() or hide() depends on the current status

$('div').stop().toggle('slow');//If the current element is displayed, it will be hidden; if it is hidden, it will be displayed; there are also three keywords; change transparency and width at the same time

fadeIn( fast | normal | slow)/fadeOut( fast | normal | slow)
The animation fades in and out by setting the opacity attribute of DOM element continuously
fadeIn() applies to elements hidden by jQuery (hide(), fadeOut(), slideUp()), or declared in CSS display:none Element of (not applicable to V isibility:hidden Elements of)

$('div').stop().fadeIn('slow');

Fadetoggle (fast | normal | slow) - acts on a single element
Determine the next action based on whether the element is visible or not

$('div').stop().fadeToggle('slow');//If the current element is displayed, it will be hidden; if it is hidden, it will be displayed; there are also three keywords; only change the transparency

slideUp( fast | normal | slow)/slideDown( fast | normal | slow)
Gradually shrink or expand in vertical direction, control height and transparency, do not control width
slideDown() is applicable to elements hidden by jQuery (hide(), fadeOut(), slideUp()), or declared in CSS display:none Element of (not applicable to V isibility:hidden Elements of)

$('div').stop().slideUp('slow');//disappear
$('div').stop().slideDown('slow');//display

slideToggle( fast | normal | slow)
Determines whether to shrink or expand based on the current state

All of the above can be passed in time or keywords

4. Timer
setTimeout(fn,time)
Wait for a while to call the function once, only once!
The first parameter is the processing function, and time is the delay time

var swiper = function(){
	...
	setTimeout(swiper,1000);//Call yourself every second, dead cycle
}
setTimeout(swiper,1000);//Actually only once

Function names in timers do not need to be quoted

var timer = null;//Define an empty variable first
var slide = function(){
	$('img').stop().slideToggle(1000);
    timer = setTimeout(slide,2000);//Assign a timer to an empty variable, which does not affect infinite loops
}
$('.obj').click(function(){
    slide();
    clearTimeout(timer);//Break infinite loop by clearing timer with variable
});

setInterval(fn,time)
Call the function every other period of time
fn can also be an anonymous function or a function name (without quotes)
Time is the delay time, which will be delayed from the first execution

var slide = function(){
    $('img').stop().slideToggle(1000);
}
$('.obj').click(function(){
    setInterval(slide,1000);//Loop call function
});

var slide = function(){
    $('img').stop().slideToggle(1000);
}
$('.obj').click(function(){
    var timer = setInterval(slide,1000);
    clearInterval(timer);//The termination method is consistent, which is equivalent to not calling at one time
});