Javascript Week 12 Lesson 1 jQuery Effect Method PDF

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

Global Leader, YEUNGJIN UNIVERSITY JavaScript Week 12. jQuery Effect Method Lesson 1. jQuery Effect Method(1) Prof. Sunhee Lee Learning Contents & Learning Objectives Learning Contents jQuery Effects - Hide and Show jQuery Effects – Fade Learning Objectives Can explain and use the jQuery Hide and Show Effects. Can explain and use the jQuery Fade Effects. 1. jQuery Effects - Hide and Show 2. jQuery Effects – Fade 1. jQuery Effects - Hide and Show(1) 1 jQuery Syntax(1) Basic syntax of jQuery - With jQuery you select (query) HTML elements and perform "actions" on them. - The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). $(selector).action() Basic syntax A $ sign to define/access jQuery of A (selector) to "query (or find)" HTML elements jQuery A jQuery action() to be performed on the element(s) 1. jQuery Effects - Hide and Show(2) 1 jQuery Syntax(2) jQuery Selectors Syntax Description $("*") Selects all elements $(this) Selects the current HTML element $("p.intro") Selects all elements with class="intro" $("p:first") Selects the first element $("ul li:first") Selects the first element of the first $("ul li:first-child") Selects the first element of every 1. jQuery Effects - Hide and Show(3) 1 jQuery Syntax(3) jQuery Selectors Syntax Description $("[href]") Selects all elements with an href attribute Selects all elements with a target attribute value equal to $("a[target='_blank']") "_blank" Selects all elements with a target attribute value NOT $("a[target!='_blank']") equal to "_blank" Selects all elements and elements of $(":button") type="button" $("tr:even") Selects all even elements $("tr:odd") Selects all odd elements 1. jQuery Effects - Hide and Show(4) 2 Understanding of jQuery Events(1) Concept of jQuery Events - All the different visitors' actions that a web page can respond to are called events. - An event represents the precise moment when something happens. Examples moving a mouse over an element selecting a radio button clicking on an element 1. jQuery Effects - Hide and Show(5) 2 Understanding of jQuery Events(2) DOM events - Here are some common DOM events. Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload 1. jQuery Effects - Hide and Show(6) 2 Understanding of jQuery Events(3) jQuery Syntax For Event Methods - In jQuery, most DOM events have an equivalent jQuery method. - To assign a click event to all paragraphs on a page, you can do this. Syntax $("p").click(); - The next step is to define what should happen when the event fires. - You must pass a function to the event: $("p").click(function(){ Syntax // action goes here!! }); 1. jQuery Effects - Hide and Show(7) 3 Commonly Used jQuery Event Methods $(document).ready() - You might have noticed that all jQuery methods in our examples, are inside a document ready event. - This is to prevent any jQuery code from running before the document is finished loading (is ready). - It is good practice to wait for the document to be fully loaded and ready before working with it. - This also allows you to have your JavaScript code before the body of your document, in the head section. $(document).ready(function(){ // jQuery methods go here... }); 1. jQuery Effects - Hide and Show(8) 4 jQuery hide() and show() Methods(1) Concept and Syntax of hide() and show() - You can hide and show HTML elements with the hide() and show() methods with jQuery. - The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds. - The optional callback parameter is a function to be executed after the hide() or show() method completes. // Syntax of hide() Methods $(selector).hide(speed,callback); Syntax // Syntax of show() Methods $(selector).show(speed,callback); 1. jQuery Effects - Hide and Show(9) 4 jQuery hide() and show() Methods(2) Example of hide() - The following example demonstrates the speed parameter with hide(). $(document).ready(function(){ $("button").click(function(){ $("p"). hide(1000); }); }); If you click on me, I will disappear. Click me away! Click me too! 1. jQuery Effects - Hide and Show(10) 4 jQuery hide() and show() Methods(3) Example of hide() and show() - The following example demonstrates the speed parameter with hide(). Hide $("#hide").click(function(){ Show $("p").hide(1000); }); $("#show").click(function(){ $("p").show(); }); 1. jQuery Effects - Hide and Show(11) 4 jQuery hide() and show() Methods(4) Concept and Syntax of jQuery Callback Functions - JavaScript statements are executed line by line. - However, with effects, the next line of code can be run even though the eff- ect is not finished. - This can create errors, So you can create a callback function to prevent this. - A callback function is executed after the current effect is finished. // Typical syntax: $(selector).hide(speed,callback); $("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden"); }); }); 1. jQuery Effects - Hide and Show(12) 4 jQuery hide() and show() Methods(5) Concept and Syntax of jQuery Callback Functions - The example below has no callback parameter, and the alert box will be displayed before the hide effect is completed. // Typical syntax: $(selector).hide(speed); $("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); }); 1. jQuery Effects - Hide and Show(13) 5 jQuery toggle() Method(1) Concept and Syntax of jQuery toggle() - You can also toggle between hiding and showing an element with the toggle() method. - Shown elements are hidden and hidden elements are shown. - The optional speed parameter can take the following values: "slow", "fast", or milliseconds. - The optional callback parameter is a function to be executed after toggle() completes. // Syntax of toggle() Methods Syntax $(selector).toggle(speed,callback); 1. jQuery Effects - Hide and Show(14) 5 jQuery toggle() Method(2) Example of jQuery toggle() - Shown elements are hidden and hidden elements are shown. $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); Toggle between hiding and showing the paragraphs This is a paragraph with little content. This is another small paragraph. 1. jQuery Effects - Hide and Show 2. jQuery Effects – Fade 2. jQuery Effects – Fade(1) 1 jQuery Fade Methods Concept of Fade Methods - With jQuery you can fade an element in and out of visibility. - jQuery has the following fade methods. fadeIn() - used to fade in a hidden element fade fadeOut() - used to fade out a visible element methods fadeToggle() - toggles between the fadeIn() and fadeOut() methods fadeTo() - allows fading to a given opacity (value between 0 and 1) 2. jQuery Effects – Fade(2) 2 jQuery fadeIn() Method(1) Concept and Syntax of jQuery fadeIn() - The jQuery fadeIn() method is used to fade in a hidden element. Syntax $(selector).fadeIn(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 fading completes. - The following example demonstrates the fadeIn() method with different parameters: 2. jQuery Effects – Fade(3) 2 jQuery fadeIn() Method(2) Example of of jQuery fadeIn() - Demonstrate fadeIn() with different parameters. $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); Click to fade in boxes 2. jQuery Effects – Fade(4) 3 jQuery fadeOut() Method(1) Concept and Syntax of jQuery fadeOut() - The jQuery fadeOut() method is used to fade out a visible element. Syntax $(selector). fadeOut(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 fading completes. - The following example demonstrates the fadeOut() method with different parameters. 2. jQuery Effects – Fade(5) 3 jQuery fadeOut() Method(2) Example of of jQuery fadeOut() - Demonstrate fadeOut() with different parameters. $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); }); Click to fade out boxes 2. jQuery Effects – Fade(6) 4 jQuery fadeToggle() Method(1) Concept and Syntax of jQuery fadeToggle() - The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods - If the elements are faded out, fadeToggle() will fade them in. - If the elements are faded in, fadeToggle() will fade them out. Syntax $(selector). fadeToggle(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 fading completes. - The following example demonstrates the fadeToggle() method with different parameters 2. jQuery Effects – Fade(7) 4 jQuery fadeToggle() Method(2) Example of of jQuery fadeToggle() - Demonstrate fadeToggle() with different speed parameters. $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); Click to fade in/out boxes 2. jQuery Effects – Fade(8) 5 jQuery fadeTo() Method(1) Concept and Syntax of jQuery fadeTo() - The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1). Syntax $(selector). fadeTo(speed,opacity,callback); - The required speed parameter specifies the duration of the effect. - It can take the following values: "slow", "fast", or milliseconds. - The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1). - The optional callback parameter is a function to be executed after the function completes. 2. jQuery Effects – Fade(9) 5 jQuery fadeTo() Method(2) Example of of jQuery fadeTo() - The following example demonstrates the fadeTo() method with different parameters $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeTo("slow", 0.15); $("#div2").fadeTo("slow", 0.4); $("#div3").fadeTo("slow", 0.7); }); }); Click to fade boxes Learning Summary 1. jQuery Effects - Hide and Show - You can hide and show HTML elements with the hide() and show() methods with jQuery. - The optional callback parameter is a function to be executed after the hide() or show() method completes. - A callback function is executed after the current effect is finished. - You can also toggle between hiding and showing an element with the toggle() method. 2. jQuery Effects – Fade - The jQuery fadeIn() method is used to fade in a hidden element. - The jQuery fadeOut() method is used to fade out a visible element. - The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. - The jQuery fadeTo() method allows fading to a given opacity. Next time, Let’s learn about Week 12 Lesson 2. jQuery Effect Method(2) References No. References 1 Inyong Jeong(2018). Introduction to JavaScript + jQuery. Easys Publishing. 15-392. 2 W3schools. 2024. https://www.w3schools.com 3 4 5 THANK YOU !