jQuery - Chapter 3 - Effects
0 likes549 views
The document discusses various jQuery effects that enhance HTML element interactions, including hide/show, fade, slide, and animation effects. It provides examples and syntax for using these effects, as well as information on callback functions and chaining methods for improved functionality. Additionally, it includes exercises for applying effects in practical scenarios.
jQuery - Chapter 3 - Effects
- 2. www.webstackacademy.comwww.webstackacademy.com Effects in jQuery (Bringing special 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 Show effects 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
- 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 in jQuery • 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 the box 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, Farah Towers, 1st Floor, MG Road, Bangalore – 560001 M: +91-809 555 7332 E: [email protected] WSA in Social Media: