SoFunction
Updated on 2025-02-28

An article will help you understand jQuery animation

jQuerySome default animations are provided
    Controlling the display and hiding of elements	    show()	hide()
	Control the transparency of the element	        fadeIn()	fadeOut()
	Control the height of the element		    slideUp()		slideDown()
	Custom animation			    animate()

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

grammar:

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

Reference description:  

Parameter 1: Speed, optional For example: 1000 milliseconds, etc. and 1 second fast slow  normal

Parameter 2: The callback function, optional function to be implemented 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 The default is 0  For example: 1000 milliseconds, etc. and 1 second fast slow  normal

Parameter 2: Callback function, optional: The function to be implemented after the function is executed after the function is executed

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

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

slideDown()Make the elements gradually extend and display

slideUp()Gradually shorten the elements until they are hidden

grammar: 

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

Reference description:

Parameter 1: Speed, optional. The default is 0. For example: 1000 milliseconds, etc. and 1 second fast slow  normal

Parameter 2: Callback function, you can choose slideUp or slideDown to execute after the function is executed.

Summarize

That’s all for this article. I hope it can help you, and I hope you can pay more attention to more of my content!