jQuery - Chapter 3 - Effects

jQuery - Chapter 3 - Effects

• 1.
  www.webstackacademy.com Effects jQuery
• 2.
  www.webstackacademy.comwww.webstackacademy.com Effects in jQuery (Bringingspecial effects)
• 3.
  www.webstackacademy.com Introduction to effects •Effects provide more options to operate on an HTML element • Starting with showing / hiding, jQuery offers multiple options • It can be primarily used for animation oriented application • Similar to other jQuery options, effects provide easier way to deal with HTML elements • With lesser amount of lines more functionality can be implemented easily • Multiple effects can be combined as well using jQuery effects chaining
• 4.
  www.webstackacademy.com Hide and Showeffects Selector Description $(selector).hide(speed,callback); Hide the selected element Speed - slow | fast | milliseconds Callback - will study in later topic $(selector).show(speed,callback); Show the selected element $(selector).toggle(speed,callback); Toggle between hide and show of the selected element
• 5.
  www.webstackacademy.com Example usage <script> $(document).ready(function() { /*Show a particular element */ $("#show").click(function(){ $("p").show(); }); }); </script>
• 6.
  www.webstackacademy.com Fading effects Selector Description $(selector).fadeIn(speed,callback);It is used to fade in a hidden elements $(selector).fadeOut(speed,callback); It is used to fade out a visible element $(selector).fadeToggle(speed,callback); Toggles between the fadeIn() and fadeOut() methods $(selector).fadeTo(speed,opacity,callback); Allows fading to a given opacity (value between 0 and 1)
• 7.
  www.webstackacademy.com Example usage –fadeIn() <script> $(document).ready(function() { /* Example for fade-in event handling */ $("#fadeinbutton").click(function(){ $("#box1").fadeIn(); $("#box2").fadeIn(3000); }); }); </script>
• 8.
  www.webstackacademy.com Example usage –fadeTo() <script> $(document).ready(function(){ $("button").click(function(){ $("#box1").fadeTo("slow", 0.2); $("#box2").fadeTo("slow", 0.5); $("#box3").fadeTo("slow", 0.7); }); }); </script>
• 9.
  www.webstackacademy.com Sliding effects Selector Description $(selector).slideDown(speed,callback);Slide down an element $(selector).slideUp(speed,callback); Slide up an element $(selector).slideToggle(speed,callback); Toggles between the slideDown() and slideUp() methods
• 10.
  www.webstackacademy.com Example usage <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); </script>
• 11.
  www.webstackacademy.com Animation effects Selector &Description $(selector).animate({params},speed,callback); Params parameter defines the CSS properties to be animated. <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left: '250px'}); }); }); </script>
• 12.
  www.webstackacademy.com Callback usage injQuery • JavaScript is an interpreted language, where statements are executed line by line • In case of effects, the next line of code can be run even though the current effect is not finished • This will create issue in getting the correct output • In order to prevent this call-back functions are provided in jQuery • Callback function is executed after the current effect is finished
• 13.
  www.webstackacademy.com Example usage –Need of call-back functions <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); /* Before hide completes, alert pops up */ /* This is not a desired behaviour */ alert("The paragraph is now hidden"); }); }); </script>
• 14.
  www.webstackacademy.com Chaining in jQuery •Multiple jQuery actions/methods can be combined together • It helps to execute multiple actions using single statement <script> $(document).ready(function(){ $("button").click(function(){ $("#p1").css("color", "red") .slideUp(2000) .slideDown(2000); }); }); </script>
• 15.
  www.webstackacademy.com Exercise • Implement thebox moving animation exercise (JavaScript) using jQuery • Implement zoom effect by increasing the text and box size upon clicking a button
• 16.
  www.webstackacademy.com WebStack Academy #83, FarahTowers, 1st Floor, MG Road, Bangalore – 560001 M: +91-809 555 7332 E: training@webstackacademy.com WSA in Social Media: