How to hide and display Animation effects in JQuery
This article mainly shows you "JQuery how to achieve hidden and show animation effects", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "JQuery how to achieve hidden and show animation effects" this article.
Hide and show
Grammar
(selector) .fadeIn ([speed,callback])
(selector) .fadeOut ([speed,callback])
(selector) .fadeToggle ([speed,callback])
Parameter description:
The optional speed parameter specifies the speed at which to hide / show. You can take the following values: "slow", "fast", or milliseconds.
The optional callback argument is to hide or show the name of the function that is executed after completion.
Implementation code
Document processing div {background: lightblue; padding: 20px;} p {background: lavenderblush; padding: 20px;} $(function () {$("# btnHide") .click (function () {/ / $("div") .hide (); / / $("div") .hide (2000) $("div") .hide (2000, function () {alert ("hide complete!") ;});}); $("# btnShow") .click (function () {/ / $("div") .show (); / / $("div") .show (2000); $("div") .show (2000, function () {alert ("Show complete!") ;});}); $("# btnToggle") .click (function () {/ / $("p"). Toggle (); / / $("p"). Toggle (2000); $("p"). Toggle (2000, function () {alert ("switching complete!") ;}); hide-div show-div toggle show and hide-p div1 div2 p1
P2
Effect display
Hidden effect display
Display effect display
Toggle show and hide
Switched from P1 to P2.
Fade in and out
Grammar
(selector) .fadeIn ([speed,callback])
(selector) .fadeOut ([speed,callback])
(selector) .fadeToggle ([speed,callback])
Parameter description:
The optional speed parameter specifies the speed at which to hide / show. You can take the following values: "slow", "fast", or milliseconds.
The optional callback argument is to hide or show the name of the function that is executed after completion.
Implementation code
Effect div {background: lightblue; padding: 20px;} p {background: lavenderblush; padding: 20px;} $(function () {$("# btnIn") .click (function () {/ / $("div") .fadeIn (); / / $("div") .fadeIn (2000) $("div") .fadeIn (2000, function () {alert ("fade in complete!") ;});}); $("# btnOut") .click (function () {/ / $("div") .fadeOut (); / / $("div") .fadeOut (2000); $("div") .fadeOut (2000, function () {alert ("fade out complete!") ;});}); $("# btnToggle") .click (function () {/ / $("p"). FadeToggle (); / / $("p"). FadeToggle (2000); $("p"). FadeToggle (2000, function () {alert ("switching complete!") ;}); fade in-div fade-div toggle fade-P div1 div2 p1
P2
The above is all the content of the article "how to hide and Show Animation effects in JQuery". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
