jQuery provides a trivially simple interface for doing various kind of amazing effects jQuery methods allow us to quickly apply commonly used effects with a minimum configuration.
You have seen basic concept of jQuery Effects. Following table lists down all the important methods to create different kind of effects:
With jQuery, you can hide and show HTML elements with the hide() and show() methods Example <html> <head> <script type=”text/javascript” src=”jQuery.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(“#hide”).click(function() { $(“p”).hide(); }); $(“#show”).click(function(){ $(“p”).show(); }}; }); </script> </head> <body> <p>if you click on the “Hide” button, i will disappear</p> <button id =”hide”>Hide</button> <button id=”show”>Show</button> </body> </html> Both hide() and show() can take two optional : speed and call back. Syntax $(selector).hide(speed ,call-back) $(selector).show(speed, call-back) The speed parameter specifies the speed of the hiding / showing and can take the following values:”slow”, ”fast”,” normal”, or milliseconds Example <html> <head> <script type=”text/javascript” src=”jQuery.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(“#hide”).click(function() { $(“p”).hide(1000); }); }}; </script> </head> <body> <p>This is a paragraph with little content</p> <p>This is another small paragraph.</p> </body> </html> <html> <head> <script type=”text/javascript” src=”jQuery.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(“.ex.hide”).click(function() { $(this).parents(“.ex”).hide(“slow”); }}; }}; </script> <style type=”text/css”> div.ex { background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } </style> </head> <body> <h3>Island Trading</h3> <div class=”ex”> <button class=”hide”> Hide me</button> <p>Contact:Helen Bennett<br/> Garden House Crowther Way<br/> London</p> </div> <h3>Paris specialities</h3> <div class=”ex”> <button class=”hide”>Hide me</button> <p>Contact:Marie Bertrand<br/> 265,Boulevard Charonne<br/> paris</p> </div> </body> </html> <p>if you click on the “Hide” button, i will disappear</p> <button id =”hide”>Hide</button> <button id=”show”>Show</button> </body> </html> The call-back parameter is the name of a function to be executed after the hide(or show) function completes.
The jQuery toggle() method toggles the visibility of HTML elements using the show() or hide() methods. Shown elements are hidden and hidden elements are shown. syntax $(selector).toggle(speed, call-back) The speed parameter can take the following values: “slow”,” fast”,” normal”, or milliseconds. <html> <head> <script type=”text/javascript” src=”jQuery.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(“#hide”).click(function() { $(“p”).toggle(); }}; }}; </script> </head> <body> <button>Toggle</button> <p>This is a paragraph with little content</p> <p>This is another small paragraph.</p> </body> </html> The call-back parameter is the name of a function to be executed after the hide(or show) method completes.
The jQuery slide methods gradually change the height for selected elements. jQuery has the following slide methods : $(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(spped,callback) The speed parameter can take the following values” “slow” , “fast”, “normal”, or milliseconds. The callback parameter is the name of a function to be executed after the function completes. SlideDown() Example <html> <head> <script type=”text/javascript” src=”jQuery.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(“.flip”).click(function() { $(“.panel”).slideDown(“slow”); }); </script> <style type=”text/css”> div.panel.p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class=”panel”> <p>Because time is valuable, we deliver quick and easy learning</p> <p> At w3schools,you can study everything you need to learn, in an accessible and handy format.</p> </div> <p class=”flip”>Show Panel</p> </body> </html> slideUp() Example <html> <head> <script type=”text/javascript” src=”jQuery.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(“.flip”).click(function() { $(“.panel”).slideup(“slow”); }}; }}; </script> <style type=”text/css”> div.panel.p.flip { margin:0px; padding:5pxl text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; } </style> </head> <body> <div class=”panel”> <p>Because time is valuabe, we deliver quick and easy learning</p> <p> At w3shools, you can study everything you need to learn,in an accessible and handy format. </p> </div> <p class = “flip”> Hide Panel</p> </body> </html> slide Toggle() Example <html> <head> <script type=”text/javascript” src=”jQuery.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(“.flip”).click(function() { $(“panel”).slideToggle(“slow”); }}; }}; </script> <style type=”text/css”> div.panel,p.flip { margin:0px; padding:5pxl text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class=”panel”> <p>Because time is valuabe, we deliver quick and easy learning</p> <p> At w3shools, you can study everything you need to learn,in an accessible and handy format. </p> </div> <p class = “flip”> Hide Panel</p> </body> </html>
The jQuery fade methods gradually change the opacity for selected elements. jQuery has the following fade methods $(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opticity,callback) The speed parameter can take the following values : “slow”, “fast”, “normal”, or milliseconds. The opacity parameter in the fadeTo() method allows fading a given opacity. The callback parameter is the name of a function to be executed after the function completes. fadeTo() Example <html> <head> <script type=”text/javascript” src=”jQuery.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(“button”).click(function() { $(“div”).fadeTo(“slow”,0.25); }}; }}; </script> </head> <body> <div style=”background:yellow;width:300px;height:300px”> <button>Click to Fade </button> </div> </body> </html> fadeout() Example <html> <head> <script type=”text/javascript” src=”jQuery.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(“button”).click(function() { $(“div”).fadeOut(4000); }}; }}; </script> </head> <body> <div style=”background:yellow;width:200px”>CLICK ME AWAY!</div> <p>If you click on the box above, it will be removed.</p> </body> </html>
You liked the article?
Like: 0
Vote for difficulty
Current difficulty (Avg): Medium
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
