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!