JavaScript jQuery Effects & Methods (PPT)

Global Leader, YEUNGJIN UNIVERSITY JavaScript Week 12. jQuery Effect Method Lesson 2. jQuery Effect Method(2) Prof. Sunhee Lee Learning Contents & Learning Objectives Learning Contents jQuery Effects - Slide jQuery Effects – Animate Learning Objectives Can explain and...

Global Leader, YEUNGJIN UNIVERSITY JavaScript Week 12. jQuery Effect Method Lesson 2. jQuery Effect Method(2) Prof. Sunhee Lee Learning Contents & Learning Objectives Learning Contents jQuery Effects - Slide jQuery Effects – Animate Learning Objectives Can explain and use the jQuery Slide Effects. Can explain and use the jQuery Animate Effects. 1. jQuery Effects - Slide 2. jQuery Effects – Animate 1. jQuery Effects - Slide(1) 1 jQuery Slide Methods Concept of Slide Methods - With jQuery you can create a sliding effect on elements. - jQuery has the following slide methods. slideDown() - used to slide down an element Slide slideUp() - used to slide up an element methods slideToggle() - toggles between the slideDown() and slideUp() methods 1. jQuery Effects - Slide(2) 2 jQuery slideDown() Method(1) Concept and Syntax of slideDown() Method - The jQuery slideDown() method is used to slide down an element. Syntax $(selector).slideDown(speed,callback); - The optional speed parameter specifies the duration of the effect. - It can take the following values: "slow", "fast", or milliseconds. - The optional callback parameter is a function to be executed after the sliding completes. 1. jQuery Effects - Slide(3) 2 jQuery slideDown() Method(2) Example of of jQuery slideDown() Method() - The following example demonstrates the slideDown() method. #panel, #flip { padding: 5px; text-align: center; $(document).ready(function(){ background-color: #e5eecc; $("#flip").click(function(){ border: solid 1px #c3c3c3; $("#panel").slideDown("slow"); } }); #panel { }); padding: 50px; display: none; } Click to slide down panel Hello world! 1. jQuery Effects - Slide(4) 3 jQuery slideUp() Method(1) Concept and Syntax of slideUp() Method - The jQuery slideUp() method is used to slide up an element. Syntax $(selector).slideUp(speed,callback); - The optional speed parameter specifies the duration of the effect. - It can take the following values: "slow", "fast", or milliseconds. - The optional callback parameter is a function to be executed after the sliding completes. - The following example demonstrates the slideUp() method. 1. jQuery Effects - Slide(5) 3 jQuery slideUp() Method(2) Example of of jQuery slideUp() Method() - The following example demonstrates the slideUp() method. #panel, #flip { padding: 5px; text-align: center; $(document).ready(function(){ background-color: #e5eecc; $("#flip").click(function(){ border: solid 1px #c3c3c3; $("#panel").slideUp("slow"); } }); #panel { }); padding: 50px; } Click to slide up panel Hello world! 1. jQuery Effects - Slide(6) 4 jQuery slideToggle() Method(1) Concept and Syntax of slideToggle() Method - The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods. - If the elements have been slid down, slideToggle() will slide them up. - If the elements have been slid up, slideToggle() will slide them down. Syntax $(selector).slideToggle(speed,callback); - The optional speed parameter can take the following values: "slow", "fast", milliseconds. - The optional callback parameter is a function to be executed after the sliding completes. 1. jQuery Effects - Slide(7) 4 jQuery slideToggle() Method(2) Example of of jQuery slideToggle() Method() - - The following example demonstrates the slideToggle() method. #panel, #flip { padding: 5px; text-align: center; $(document).ready(function(){ background-color: #e5eecc; $("#flip").click(function(){ border: solid 1px #c3c3c3; $("#panel").slideToggle("slow"); } }); #panel { }); padding: 50px; display: none; } Click to slide the panel Hello world! 1. jQuery Effects - Slide(8) 5 jQuery - Chaining(1) Concept and Syntax of jQuery Method Chaining - With jQuery, you can chain together actions/methods. - Chaining allows us to run multiple jQuery methods (on the same ele- ment) within a single statement. - Until now we have been writing jQuery statements one at a time (one after the other). - However, there is a technique called chaining, that allows us to run multiple jQuery commands, one after the other, on the same elements. 1. jQuery Effects - Slide(9) 5 jQuery - Chaining(2) Example of of jQuery Method Chaining - The following example chains together the css(), slideUp(), and slideDown() methods. - The "p1" element first changes to red, then it slides up, and then it slides down. $(document).ready(function(){ $("button").click(function(){ $("#p1").css("color", "red").slideUp(2000).slideDown(2000); }); }); jQuery is fun! Start Animation 1. jQuery Effects - Slide 2. jQuery Effects – Animate 2. jQuery Effects – Animate(1) 1 jQuery animate() Method(1) Concept and Syntax of jQuery animate() Method - The jQuery animate() method is used to create custom animations. Syntax $(selector).animate({params},speed,callback); - The required params parameter defines the CSS properties to be ani- mated. - The optional speed parameter specifies the duration of the effect. - It can take the following values: "slow", "fast", or milliseconds. - The optional callback parameter is a function to be executed after the animation completes. 2. jQuery Effects – Animate(2) 1 jQuery animate() Method(2) Example of jQuery animate() Method - The following example demonstrates a simple use of the animate(). - it moves a element to the right, until it has reached a left pro- perty of 250px. $(document).ready(function(){ $("button").click(function(){ $("div").animate({left: '250px'}); }); }); Start Animation 2. jQuery Effects – Animate(3) 1 jQuery animate() Method(3) Example of jQuery animate() - Manipulate Multiple Properties - Notice that multiple properties can be animated at the same time. Start Animation $(document).ready(function(){ $("button").click(function(){ opacity: '0.5', height: '150px', width: '150px' }); }); }); 2. jQuery Effects – Animate(4) 1 jQuery animate() Method(4) Example of jQuery animate() - Using Relative Values - It is also possible to define relative values (the value is then relative to the element's current value). - This is done by putting += or -= in front of the value. }); }); $(document).ready(function(){ $("button").click(function(){ $("div").animate({ Start Animation left: '250px', height: ’+=150px',