7 commonly used jQuery Effects - Basic concept - Nano Blogs Online

Nano Blogs Online

Nano Blogs Online provides free help in Web Technologies, Affiliate Marketing, Social Media Marketing, Digital Marketing, and reviews different products from the online world.

7 commonly used jQuery Effects - Basic concept

7 commonly used jQuery Effects - Basic concept

Share This

7 commonly used jQuery Effects 

The most widely used 7 jQuery effect are following!
  1. jQuery hide() and show()
  2. Fading
  3. Sliding
  4. Animation
  5. Stop Animations
  6. Callback Functions
  7. 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.
  1. hide();
  2. show;
  3. 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.
  1. fadeIn();
  2. fadeOut();
  3. fadeToggle();
  4. 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.
  1. slideDown();
  2. slideUp();
  3. 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.
  1. 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.
  1. 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>  


1 comment:

  1. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

    ReplyDelete