An article takes you to understand jQuery animation

Catalog 1. Display and Hide of Control Elements show () hide () 2. Transparency of Control Elements fadeIn () fadeOut () 3: Height of Control Elements slideUp () slideDown () Summary

jQuery Provides 1 Some default animations 
     Control the display and hiding of elements 	    show()	hide()
	 Control the transparency of elements 	        fadeIn()	fadeOut()
	 Height of control element 		    slideUp()		slideDown()
	 Custom animation 			    animate()

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

Syntax:

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

Reference description:

Parameter 1: Speed, optional for example: 1000 milliseconds and so on with 1 second fast slow normal

Parameter 2: Callback function, optional show or hide function after execution, the function to be implemented

$(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. Transparency of control elements fadeIn () fadeOut ()

Syntax:

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

Reference description:

Parameter 1: Speed, optional default is 0 for example: 1000 milliseconds and so on with 1 second fast slow normal

Parameter 2: Callback function, which can be executed after fadeIn or fadeOut is executed

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

3: Height of control element slideUp () slideDown ()

slideDown() Make the element gradually extend and display

slideUp() Gradually shorten the element until it is hidden

Syntax:

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

Reference description:

Parameter 1: Speed, optional default is 0 for example: 1000 milliseconds and so on with 1 second fast slow normal

Parameter 2: Callback function. You can choose the function to be executed after slideUp or slideDown is executed

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!