Home > Developer > Web Develop
jquery effects hide, show, toggle, swipe, fade, and animate1, hide and show (change: display:none;) hide ()--hide show ()--show Toggle () method: You can use it to toggle Hide () and show () method eg1: display<style type= "text/css" >*{margin:0;padding:0;}. body{font-size:12px;font-family: "microsoft Jas black"; color:#666;}. yym{width:100px;height:100px;background:red;text-align:center;line-height:100px;border-radius:50px;color:#fff;display:none;}</style>class= "yym" > World-wide </div><input type= "button" value= "click Show html element" id= "show_btn"/><input type= "button" Value= "click to display HTML element and execute callback function" id= "show_btn1"/><script type= "text/javascript" src= "js/jquery-1.11.3.min.js" > </script><script type= "text/javascript" >$(function(){//Click the button to let the Class=yym text show up$ ("#show_btn"). Click (function(){//slow Default value ==600 milliseconds, 1 seconds =1000 milliseconds; fast==200 milliseconds$ (". yym"). Show ("slow"));});//display The. Yym in 1000 milliseconds and replace the text with new content$ ("#show_btn1"). Click (function(){$(". yym"). Show (1000,function() {$ (this). text ("i want to see");});});});</script>eg2: Hide<body><p> Yellow River is China's second largest river </p><input type= "button" value= "click to hide text" id= "yym_hide"/><input type= "button" value= "click slowly hide text" id= "yym_hide1"/><input type= "button" value= "slow Hide Text and callback function" id= "yym_hide2"/>< Script type= "text/javascript" src= "js/jquery-1.11.3.min.js" ></script><script type= "text/javascript" >$(function(){//Click the button to hide the P tag$ ("#yym_hide"). Click (function(){$("p").Hide ();});//Click the button to hide the P tag slowly$ ("#yym_hide1"). Click (function(){$("p"). Hide (2000);});//click on the element$ ("#yym_hide2"). Click (function(){//Hide P tag, function (callback Function)$ ("p"). Hide (1000,function(){$("body"). text ("mother River of the yellow river");//after the text is hidden, to make the text change, use the body});});});</script>eg3:toggle ()--click the button to hide, then click and Show<style type= "text/css" >*{margin:0;padding:0;}. yym{width:300px;height:300px;background:green;}</style>class= "yym" ></div><input type= "button" value= "toggle function" id= "yym_toggle"/><script type= "text/ JavaScript "src=" js/jquery-1.11.3.min.js "></script><script type=" text/javascript ">$(function(){//Click the button to hide, then click and Show$ ("#yym_toggle"). Click (function(){});});</script>eg3.1:<style type= "text/css" >*{margin:0;padding:0;}. yym{width:300px;height:300px;background:green;}</style>class= "yym" ></div><input type= "button" value= "toggle function" id= "yym_toggle"/><script type= "text/ JavaScript "src=" js/jquery-1.11.3.min.js "></script><script type=" text/javascript ">$(function(){//Click the button to hide, then click and Show$ ("#yym_toggle"). Click (function(){$(". yym"). Toggle (2000,function(){$("body"). html (" ')});});});</script>2, fade in (change: width, height, transparency <opacity>with jquery, You can implement the fade-out effect of the element (change opacity Transparency) jquery has the following four methods: fadeIn () used to fade the hidden elements fadeout () method for fading out visible elements fadetoggle () The method can be toggled between the Fadeint () and the fadeout () method if the element has faded out, then Fadetoggle () adds a fade-in effect to the element if the element has faded in, then Fadetoggle () adds a fade-out effect to the element jquery FadeTo () Method The jquery FadeTo () method allows the gradient to be given opacity (values between 0 and 1) eg:fadeIn () fade element fadeout fade element Fadetoggle () Toggle Fadeto Transparency<style type= "text/css" >*{margin:0;padding:0;}. yym{width:300px;height:300px;background:red;display:none;}</style>class= "yym" ></div><script type= "text/javascript" src= "js/jquery-1.11.3.min.js" ></script>< Script Type= "text/javascript" >$(function(){//Fadein Fade in$ ("#yym_fadeIn"). Click (function(){$(". yym"). fadeIn (2000);});//fadeout Fade out$ ("#yym_fadeOut"). Click (function(){$(". yym"). FadeOut (2000);});//fadetoggle hide-and-show Switching$ ("#yym_fadeToggle"). Click (function(){$(". yym").Fadetoggle ();});//Fadeto gradient to a given opacity (values between 0 and 1)$ ("#yym_fadeTo"). Click (function(){$(". yym"). FadeTo (2000,0.5,function(){//indicates that 2 seconds becomes semi-transparent, in all cases the function is additive, plus the other changesAlert ("too handsome");});});});</script></body>3, sliding (change: height) The jquery slide method allows the element to slide up and down (mainly to change the Height) through jquery, you can create a sliding effect on the element jquery has the following sliding methods: slidedown () to slide the element down Slideup () Used to slide up the element Slidetoggle () method to toggle between Slidedown () and Slideup methods if the element is sliding down, then Slidetoggle () can slide up if the element is sliding up, then Slidetoggle () To slide down eg:<style type= "text/css" >*{margin:0;padding:0;}. yym{width:300px;height:300px;background:red;display:none}</style>class= "yym" ></div><script type= "text/javascript" src= "js/jquery-1.11.3.min.js" ></script>< Script Type= "text/javascript" >$(function(){//Slidedown Slide down$ ("#yym_slideDown"). Click (function(){$(". yym"). Slidedown (2000);});//slideup Slide Up$ ("#yym_slideUp"). Click (function(){$(". yym"). Slideup (4000);});//slidetoggle swipe Up/down toggle$ ("#yym_slideToggle"). Click (function(){$(". yym"). Slidetoggle (2000);});});</script>4, 1the animated jquery Animate () method allows you to create a custom animation of the jquery Animation--animate () method for creating custom animations with the jquery animate () method2Stop animation The jquery Stop () method is used to stop the jquery stop () method before the animation or effect is complete, and the jquery Stop () method is used to stop animations or effects before they are finished, and the Stop () method applies to all jquery effect Functions. Fade in and custom animations eg:<style type= "text/css" >*{margin:0;padding:0;}. yym{width:300px;height:300px;background:red;position:absolute;left:0;top:30px;}</style>class= "yym" ></div><script type= "text/javascript" src= "js/jquery-1.11.3.min.js" ></script>< Script Type= "text/javascript" >$(function(){//make the original background picture Move.$ ("#yym_animate"). Click (function(){$(". yym").Animate ({width: "500px",Height: "500px",//position must be positioned when movingLeft: "200px",//Move RightTop: "200px"//Move Down},2000,function(){//you can do it without writing Time.Alert (0);});});//to stop the original moving background picture .$ ("#yym_stop"). Click (function(){$(". yym").Stop ();});});</script></body>
jquery effects: hide, show, toggle, swipe, fade, animate
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
