An article to help you understand jQuery animation

jQuery provides some default animations to control the display and hiding of elements: show() hide()
	Control the transparency of an element fadeIn() fadeOut()
	Control the height of an element slideUp() slideDown()
	Custom animation animate()

1. Control the display and hiding of elements show() hide()

grammar:

 $("selector").show([speed],[callback]);

Reference description:

Parameter 1 : speed, optional, for example: 1000 milliseconds, 1 second, fast, slow, normal

Parameter 2 : callback function, optional function to be executed after the show or hide function is executed

$(function () {
			$(".nav-ul li").on({"mouseover":function () {
					$(this).css("background","pink")
				},"mouseout":function () {
					$(this).css("background","#ff2832")
				}});
			$(".menu-btn").hover(function () {
				$(this).next().show("fast")
			},function () {
				$(this).next().hide("slow")
			})
		})

2. Control the transparency of elements fadeIn() fadeOut()

grammar:

    $("selector").fadeIn([speed],[callback]);
    $("selector").fadeOut([speed],[callback]);

Reference description:

Parameter 1 : speed, optional, default is 0, for example: 1000 milliseconds, etc., 1 second fast slow normal

Parameter 2 : callback function, optional. The function to be executed after fadeIn or fadeOut is executed.

$(function () {
		$("input[name='fadein_btn']").click(function () {
			$("img:eq(0)").fadeIn(500,function () {
				alert("fade in successfully")
			})
		})
		$("input[name='fadeout_btn']").click(function () {
			$("img:eq(0)").fadeOut(1000,function () {
				alert("fade out successfully")
			})
		})
	})

3: Control the height of the element slideUp() slideDown()

slideDown() makes the element gradually extend and display

slideUp() makes the element gradually shorten until it is hidden

grammar:

    $("selector").slideUp([speed],[callback]);
    $("selector").slideDown([speed],[callback]);

Reference description:

Parameter 1: speed, optional, default is 0, for example: 1000 milliseconds, etc., 1 second fast slow normal

Parameter 2: callback function, optional. The function to be executed after slideUp or slideDown is executed.

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!