Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.