jQuery's automatic display and hide, fade in and fade out, fly in and fly out, custom animation
Extension: opacity required. Specifies the transparency to fade in or out. Must be a number between 0.00 and 1.00.
1. The two methods of showing and hiding hide() and show() can accept parameters to control the display and hide process. The
syntax is as follows
show(duration,[callback]);
hide(duration,[callback]);
where duration represents the animation execution time The length of the string, which can represent the speed, including slow, normal, fast. It can also be an integer (milliseconds) representing the time. callback is an optional callback function. Executed after the animation completes.
$("input:last").click(function() {
$("p").show(500); //show
});
2. Use fadeIn() and fadeOut() methods
The animation effect is similar to fade, the syntax is exactly the same as slow() and hide()
grammar:
fadeIn(duration, [callback]);
fadeOut(duration, [callback]);
$("input:eq(1)").click(function() {
$("img").fadeIn(1000); //逐渐fadeIn
});
3. The use of the fadeTo() method gradually changes the opacity of the selected element to the specified value
语法：$("input:eq(2)").click(function() {
$("img").fadeTo(1000, 0.5);
});
4.slideUp() and slideDown() are used to simulate the similar slide curtain effect in PPT. This animation effect only adjusts the height of the element, which can hide or display the matching element in a "sliding" way.
I saw someone on the Internet say that this sliding effect is achieved by controlling the display style. I also had this question at the beginning, so I added a script to output the height of the div in the code to verify whether the sliding effect is indeed controlled by the height. Yes, it turns out that it is.
①The jQuery slideDown() method is used to slide elements down.
$(selector).slideDown(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function to execute after the swipe is complete.
②The jQuery slideUp() method is used to slide elements up.
③jQuery slideToggle() method can switch between slideDown() and slideUp() methods.
If elements slide down, slideToggle() slides them up.
If elements slide up, slideToggle() slides them down.
5.jQuery can't cover all animation effects, but it provides the animate() method to customize animations
There are two forms. The first form is more commonly used. The usage is as follows
①animate(params,[duration],[easing],[callback])
Note: The variables in params follow the camel naming convention. For example, paddingLeft cannot be written as padding-left. In addition, params can only be properties represented by numerical values in CSS. For example width.top.opacity etc.
所以像backgroundColor这样的属性不被animate支持，这里我遇到的一个问题就是溢出隐藏overflow-y,这里有"-"，所以不能加"-"。且属性的值不是数字，所以不能用这些属性。
在params中，jQuery还可以用“+=”或者"-="来表示相对变化。如先将div进行绝对定位，然后使用animate()中的-=和+=分别实现相对左移和相对右移。