An article takes you to understand jQuery animation
- 2021-12-05 05:22:01
- OfStack
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!