Home > Developer > Web Develop
//jquery Effects-hide and show. With jquery, you can use the Hide () and show () methods to hide and display HTML elements://Hide Effect Demo:$ (document). Ready (function(){ $("#hide"). Click (function(){ $("P"). Hide (); });});//Show Effect Demo$ (document). Ready (function(){ $("#show"). Click (function(){ $("P"). Show (); });});//HTML code/*<body><p> If you click on the "Hide" button, I will disappear. </p><button id= "Hide" > Hide </button><button id= "Show" > Show </button></body>*/$ (selector). Hide (speed,callback);/*The optional speed parameter specifies the rate of concealment/display, which can take the following values: "Slow", "fast", or milliseconds. The optional callback parameter is the name of the function that is executed after the hide or display is complete. The following example shows the Hide () method with the speed parameter:*/$ (document). Ready (function(){ $("#hide"). Click (function(){ $("P"). Hide (1000);//1 seconds of event execution hides the effect });});/*jquery Toggle () with jquery, you can use the toggle () method to toggle the Hide () and show () methods. Displays the elements that are hidden and hides the displayed elements:*/$ (document). Ready (function(){ $("button"). Click (function(){ $("P"). Toggle (); });});/*$ (selector). Toggle (speed,callback); The optional speed parameter specifies the rate of concealment/display, which can take the following values: "Slow", "fast", or milliseconds. The optional callback parameter is the function name that is executed after the toggle () method completes. */$ (document). Ready (function(){ $("button"). Click (function(){ $("P"). Toggle (1000); });});//---of jquery effects fade in/*JQuery has the following four methods of Fade: FadeIn () FadeOut () Fadetoggle () FadeTo ()*///jQuery fadeIn () is used to fade in hidden elements. $ (selector). FadeIn (speed,callback);//The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds .//The optional callback parameter is the name of the function that is executed after fading completes. /*<div id= "Div1" style= "width:80px;height:80px;background-color:red;" ></div><br><div id= "Div2" style= "Width:80px;height:80px;background-color:green;" ></div><br><div id= "Div3" style= "Width:80px;height:80px;background-color:blue;" ></div>*/$ (document). Ready (function(){ $("button"). Click (function(){ $("#div1"). FadeIn (); $("#div2"). FadeIn ("slow")); $("#div3"). FadeIn (3000); $("P"). FadeIn (4000); });});//The jQuery FadeOut () method is used to fade out visible elements. $ (document). Ready (function(){ $("button"). Click (function(){ $("#div1"). FadeOut (); $("#div2"). FadeOut ("slow")); $("#div3"). FadeOut (3000); })});//the JQuery fadetoggle () method can be toggled between the fadeIn () and the FadeOut () method$ (document). Ready (function(){ $("button"). Click (function(){ $("#div1"). Fadetoggle (); $("#div2"). Fadetoggle ("slow")); $("#div3"). Fadetoggle (3000); });});//the JQuery fadeTo () method allows the gradient to be given opacity (values between 0 and 1). //$ (selector). FadeTo (speed,opacity,callback);//The required speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds. //The required opacity parameter in the FadeTo () method sets the fade effect to the given opacity (values between 0 and 1). //The optional callback parameter is the function name that is executed after the function completes. $ (document). Ready (function(){ $("button"). Click (function(){ $("#div1"). FadeTo ("Slow", 0.15) $("#div2"). FadeTo ("slow", 0.5) $("#div3"). FadeTo ("Slow", 0.12) });});//JQuery effect-swipe/*jquery slide method with jquery, you can create a sliding effect on an element. JQuery has the following sliding methods: Slidedown () slideup () Slidetoggle ()*//*$ (selector). Slidedown (speed,callback); The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds. The optional callback parameter is the name of the function that is executed after the slide is completed. *///jquery Code$ (document). Ready (function(){ $("#flip"). Click (function(){ $("#panel"). Slidedown ("Dlow")); });});//CSS Code/*<style type= "Text/css" > #panel, #flip {padding:5px;text-align:center;background-color: #e5eecc; border: Solid 1px #c3c3c3;} #panel {padding:50px;display:none;} </style>*///The jQuery slideup () method is used to slide the element up. $ (document). Ready (function(){ $("#flip"). Click (function(){ $("#panel"). Slideup ()} );//the JQuery slidetoggle () method can be toggled between the Slidedown () and the Slideup () method. $ (document). Ready (function(){ $("#flip"). Click (function(){ $("#panel"). Slidetoggle (); })})//jQuery Effects-animations//the JQuery animate () method allows you to create custom animations. //$ (selector). Animate ({params},speed,callback);//the required params parameter defines the CSS property that forms the animation. //The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds. //The optional callback parameter is the name of the function that is executed after the animation is completed. $ (document). Ready (function(){ $("button"). Click (function(){ $("Div"). Animate ({left:' 250px ', opacity:' 0.5 ', Height:' 150px ', Width:' 150px ' }); })});//<div style= "background: #98bf21; height:200px;width:100px;position:absolute;" >//You can also define a relative value (this value relative to the current value of the element). You need to precede the value with + = or-=:$ (document). Ready (function(){ $("button"). Click (function(){ $("Div"). Animate ({left:' 250px ', Height:' +=150px ', Width:' +=150px ' }); });});//JQuery animate ()-Use predefined values//you can even set the animation value of a property to "show", "Hide", or "toggle":$ (document). Ready (function(){ $("button"). Click (function(){ $("Div"). Animate ({height:' Toggle ' }); });});//JQuery animate ()-Use the queue feature//By default, JQuery provides queue functionality for animations. //This means that if you write multiple animate () calls after each other, JQuery creates an "internal" queue that contains these method calls. These animate calls are then run individually. $ (document). Ready (function(){ $("button"). Click (function(){ vardiv=$ ("div"); Div.animate ({height:' 300px ', opacity: ' 0.4 '}, ' slow '); Div.animate ({width:' 300px ', opacity: ' 0.8 '}, ' slow '); Div.animate ({height:' 100px ', opacity: ' 0.4 '}, ' slow '); Div.animate ({width:' 100px ', opacity: ' 0.8 '}, ' slow '); });}); $ (document). Ready (function(){ $("button"). Click (function(){ vardiv= ("div"); Div.animate ({left:' 250px '}); Div.animate ({fontSize:' 3em ', "slow"); });});//Stop () stops the animation$ (document). Ready (function(){ $("#flip"). Click (function(){ $("#panel"). Slidedown (5000); }); $("#stop"). Click (function(){ $("#panel"). Stop (); });});//JQuery Callback Method$ (document). Ready (function(){ $("P"). Hide ("slow",function() {alert ("The page is now hidden!"); });});//no callback function in the case$ (document). Ready (function(){ $("button"). Click (function(){ $("P"). Hide (1000,function() {alert ("Now the paragraph is hidden."); }); });});//with JQuery, you can link actions/methods together. //Chaining allows us to run multiple jQuery methods (on the same element) in one statement. $ (document). Ready (function() { $("button"). Click (function(){ $("#p1"). CSS ("Color", "green"). Slideup (+). Slidedown (2000); }); });
jquery Effect Code--(ii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
