7 commonly used jQuery Effects

The most widely used 7 jQuery effect are following!

jQuery hide() and show()
Fading
Sliding
Animation
Stop Animations
Callback Functions
Chaining

Note: Above are the basic Effects, but one other effect which play a very important role is Toggle Effect, which will be discussed throughout this class.

1. jQuery hide() and show()

With jQuery, you can hide and show HTML elements with the hide() and show() methods

Here we will use the following three effects i.e.

hide();
show;
toggle();

hide();

Example: Note in this example I all the required code to include the jQuery. For other examples only inside <body> </body> code will be change.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>JQuery Tutorial</title>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  
 </head>  
 <body>  
 <h2 style="display:none;">The text to be hide or show</h2>  
 <button>Hide</button>  
 <script>  
 $(document).ready(function(){  
      $("button").click(function(){  
           $("h2").hide();  
      });  
 });  
 </script>  
 </body>  
 </html>

show();

Example:

 <h2 style="display:none;">The text to be hide or show</h2>  
 <button>Hide</button>  
 <script>  
 $(document).ready(function(){  
      $("button").click(function(){  
           $("h2").show();  
      });  
 });  
 </script>

toggle();

Example:

 <h2 style="display:none;">The text to be hide or show</h2>  
 <button>Hide</button>  
 <script>  
 $(document).ready(function(){  
      $("button").click(function(){  
           $("h2").toggle();  
      });  
 });  
 </script>

2. jQuery Fading Effects

With jQuery you can fade elements in and out of visibility.

fadeIn();
fadeOut();
fadeToggle();
fadeTo();

fadeIn();

Example:

 <div style="width:300px; height:300px; background-color:#3ef8ff; margin:10px; padding:10px; display:none;">  
 <h2>The text to be hide or show</h2>  
 </div>  
 <button id="btn1">FadeIn</button>  
 <button id="btn2">FadeIn Slow</button>  
 <button id="btn3">FadeIn 3000 </button>  
 <script>  
 $(document).ready(function(){  
      $("#btn1").click(function(){  
           $("div").fadeIn();  
      });  
 });  
 $(document).ready(function(){  
      $("#btn2").click(function(){  
           $("div").fadeIn("slow");  
      });  
 });  
 $(document).ready(function(){  
      $("#btn3").click(function(){  
           $("div").fadeIn(3000);  
      });  
 });  
 </script>

fadeOut();

Example:

 <div style="width:300px; height:300px; background-color:#3ef8ff; margin:10px; padding:10px;">  
 <h2>The text to be hide or show</h2>  
 </div>  
 <button id="btn1">FadeOut</button>  
 <button id="btn2">FadeOut Slow</button>  
 <button id="btn3">FadeOut 3000 </button>  
 <script>  
 $(document).ready(function(){  
      $("#btn1").click(function(){  
           $("div").fadeOut();  
      });  
 });  
 $(document).ready(function(){  
      $("#btn2").click(function(){  
           $("div").fadeOut("slow");  
      });  
 });  
 $(document).ready(function(){  
      $("#btn3").click(function(){  
           $("div").fadeOut(3000);  
      });  
 });  
 </script>

fadeToggle();

Example:

 <div style="width:300px; height:300px; background-color:#3ef8ff; margin:10px; padding:10px;">  
 <h2>The text to be hide or show</h2>  
 </div>  
 <button id="btn1">Hide/Shaw</button>  
 <button id="btn2">Hide/Shaw Slow</button>  
 <button id="btn3">Hide/Shaw 3000 </button>  
 <script>  
 $(document).ready(function(){  
      $("#btn1").click(function(){  
           $("div").fadeToggle();  
      });  
 });  
 $(document).ready(function(){  
      $("#btn2").click(function(){  
           $("div").fadeToggle("slow");  
      });  
 });  
 $(document).ready(function(){  
      $("#btn3").click(function(){  
           $("div").fadeToggle(3000);  
      });  
 });  
 </script>

fadeTo();

Example:

 <div style="width:300px; height:300px; background-color:#3ef8ff; margin:10px; padding:10px;">  
 <h2>The text to be hide or show</h2>  
 </div>  
 <button id="btn2">Hide/Shaw To Slow</button>  
 <button id="btn3">Hide/Shaw To 3000 to 0.2 </button>  
 <script>  
 $(document).ready(function(){  
      $("#btn2").click(function(){  
           $("div").fadeTo("slow", 0.5);  
      });  
 });  
 $(document).ready(function(){  
      $("#btn3").click(function(){  
           $("div").fadeTo(3000, 0.2);  
      });  
 });  
 </script>

3. jQuery Sliding Effects

With jQuery you can create a sliding effect on elements.

slideDown();
slideUp();
slideToggle();

slideDown();

Example:

 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; margin:0px; cursor: pointer; text-align:center;">  
 Detail Information  
 </p>  
 <p id="detail" style="width:300px; height:300px; background-color:#3ef8ff; padding:10px; margin-top:0px; border:1px solid #0a7175; display:none;">  
 Detail information is given. Detail information is given. Detail information is given. Detail information is given.  
 </p>  
 <script>  
 $(document).ready(function(){  
      $("#tab").click(function(){  
           $("#detail").slideDown();  
      })  
 });  
 </script>

Note: other parameters for SlideDown(); method are

 $("#detail").slideDown("slow");

AND

 $("#detail").slideDown(2000);

slideUp();

Example:

 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; margin:0px; cursor: pointer; text-align:center;">  
 Detail Information  
 </p>  
 <p id="detail" style="width:300px; height:300px; background-color:#3ef8ff; padding:10px; margin-top:0px; border:1px solid #0a7175;">  
 Detail information is given. Detail information is given. Detail information is given. Detail information is given.  
 </p>  
 <script>  
 $(document).ready(function(){  
      $("#tab").click(function(){  
           $("#detail").slideUp();  
      })  
 });  
 </script>

Note: other parameters for SlideUp(); method are

 $("#detail").slideUp("slow");

AND

 $("#detail").slideUp(300);

slideToggle();

Example:

 <body>  
 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; margin:0px; cursor: pointer; text-align:center;">  
 Detail Information  
 </p>  
 <p id="detail" style="width:300px; height:300px; background-color:#3ef8ff; padding:10px; margin-top:0px; border:1px solid #0a7175; display:none;">  
 Detail information is given. Detail information is given. Detail information is given. Detail information is given.  
 </p>  
 <script>  
 $(document).ready(function(){  
      $("#tab").click(function(){  
           $("#detail").slideToggle();  
      })  
 });  
 </script>

Note: other parameters for SlideToggle(); method are

 $("#detail").slideToggle("slow");

AND

 $("#detail").slideToggle(2000);

4. jQuery Effects - Animation

The jQuery animate() method is used to create custom animations.

animate();

animate();

Example:

 <body>  
 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 Click to animate!  
 </p>  
 <p id="detail" style="width:300px; height:300px; background-color:#3ef8ff; padding:10px; border:1px solid #0a7175; position: absolute;">  
 Detail information is given. Detail information is given.  
 </p>  
 <script>  
 $(document).ready(function(){  
      $("#tab").click(function(){  
           $("#detail").animate({left:"400px", width:"100px", height:"100px"});  
      })  
 });  
 </script>

5. jQuery Stop

The jQuery stop() method is used to stop animations or effects before it is finished.

stop();

stop();

Example:

 Stop  
 </p>  
 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; margin:0px; cursor: pointer; text-align:center;">  
 Detail Information  
 </p>  
 <p id="detail" style="width:300px; height:300px; background-color:#3ef8ff; padding:10px; margin-top:0px; border:1px solid #0a7175; display:none;">  
 Detail information is given. Detail information is given. Detail information is given. Detail information is given.  
 </p>  
 <script>  
 $(document).ready(function(){  
      $("#tab").click(function(){  
           $("#detail").slideToggle(3000);  
      })  
      $("#tab2").click(function(){  
           $("#detail").stop();  
      })  
 });  
 </script>

6. jQuery Callback Functions

A callback function is executed after the current effect is 100% finished.

Typical syntax: $(selector).hide(speed,callback);

 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 Detail Information  
 </p>  
 <p id="detail" style="width:300px; height:300px; background-color:#3ef8ff; padding:10px; border:1px solid #0a7175;">  
 Detail information is given. Detail information is given. Detail information is given. Detail information is given.  
 </p>  
 <script>  
 $(document).ready(function(){  
      $("#tab").click(function(){  
           $("#detail").hide("slow", function(){  
                document.alert("The text is gone");  
           });  
      })  
 });  
 </script>

7. jQuery - Chaining

With jQuery, you can chain together actions/methods.

 <p id="tab" style="width:286px; height:10px; background-color:#3ef8ff; padding:18px; cursor: pointer; text-align:center;">  
 Detail Information  
 </p>  
 <p id="detail" style="width:300px; height:300px; background-color:#3ef8ff; padding:10px; border:1px solid #0a7175;">  
 Detail information is given. Detail information is given. Detail information is given. Detail information is given.  
 </p>  
 <script>  
 $(document).ready(function(){  
      $("#tab").click(function(){  
           $("#detail").css("color", "red").slideUp(2000).slideDown(2000);  
 });  
 });  
 </script>

Saturday, July 9, 2016