Basic Animation: JavaScript and jQuery

 1 week from today (next Tuesday)  You're allowed to bring a 3x5 card with anything written on it that you want  You're allowed to write on both sides 2

3 Basic Animation

4 JavaScript: Show/Hide/Toggle One of the ways that web pages often differ from applications on the desktop is how content appears. In applications, you click on something, and the application immediately makes a change to show the content or provide you with your answer. But with web pages, typically you have to reload the page or go to a completely new page. This can make the experience more disjointed—as users have to wait for the first page to load and then wait again for the second page and so on. But with HTML, CSS, and JavaScript you can create an application-style experience—and one of the easiest ways is to have HTML elements that toggle on and off when they are requested. In order to create a DIV that turns on and off, you need the following: A link or button to control the DIV (turn it on and off) The DIV to show and hide JavaScript (specifically, jQuery) to perform the action

5 jQuery: Show/Hide/Toggle Using jQuery we can accomplish the same thing using the show(), hide(), and toggle() jQuery methods. (see W3Schools jQuery Effects – Hide and Show for reference)jQuery Effects – Hide and Show $(document).ready(function() { // the 'basics' just call show/hide/toggle $('#hideLink').click(function(){ $('#someText').hide(); }); $('#showLink').click(function(){ $('#someText').show(); }); $('#toggleLink').click(function(){ $('#someText').toggle(); }); jQuery show: jQuery hide: jQuery toggle: animation_jquery_01.html animation_jquery_01.js

6 jQuery: Show/Hide/Toggle CONTINUED You can also add duration to the jQuery show(), hide(), and toggle() methods by including a speed parameter in milliseconds (see W3Schools jQuery Effects – Hide and Show for reference)jQuery Effects – Hide and Show // the 'duration' buttons all have a duration $("#showDivDur").click( function() { $("#targetDur").show(2000); // time is in milliseconds }); $("#hideDivDur").click( function() { $("#targetDur").hide(2000); }); $("#toggleDivDur").click( function() { $("#targetDur").toggle(2000); }); animation_jquery_01.html animation_jquery_01.js

7 jQuery: Show/Hide/Toggle CONTINUED You might also add an optional callback to the speed parameter which is a function to be executed after method completes (see W3Schools jQuery Effects – Hide and Show for reference)jQuery Effects – Hide and Show function callThisFunctionWhenDone() { alert("Finished the animation!"); } // 'callback' does something after the animation has finished $("#showDivCallback").click( function() { $("#targetCallback").show(1000, callThisFunctionWhenDone); // NO parentheses after function name }); $("#hideDivCallback").click( function() { $("#targetCallback").hide('slow', callThisFunctionWhenDone); }); $("#toggleDivCallback").click( function() { $("#targetCallback").toggle(2000, callThisFunctionWhenDone); }); animation_jquery_01.html animation_jquery_01.js

8 jQuery: Show/Hide/Toggle – Fade Instead of jQuery's show(), hide(), and toggle() methods you might use fadeIn(), fadeout(), and fadeToggle() instead to provide a bit more of an animation effect (see W3Schools jQuery Effects – Fading for reference)jQuery Effects – Fading $(document).ready( function() { // the 'basics' just call fadeIn/fadeOut/fadeToggle $("#fadeDivIn").click( function() { $("#target").fadeIn(); }); $("#fadeDivOut").click( function() { $("#target").fadeOut(); }); $("#fadeToggleDiv").click( function() { $("#target").fadeToggle(); }); jQuery fadeIn: jQuery fadeOut: jQuery fadeToggle: animation_jquery_02.html animation_jquery_02.js

9 jQuery: Show/Hide/Toggle – Fade CONTINUED Like the show(), hide(), and toggle() methods, the fadeIn(), fadeout(), and fadeToggle() can also include a speed parameter in milliseconds (see W3Schools jQuery Effects – Fading for reference)jQuery Effects – Fading // the 'duration' buttons all have a duration $("#fadeDivInDur").click( function() { $("#targetDur").fadeIn(2000); // time is in milliseconds }); $("#fadeDivOutDur").click( function() { $("#targetDur").fadeOut(2000); }); $("#fadeToggleDivDur").click( function() { $("#targetDur").fadeToggle(2000); }); animation_jquery_02.html animation_jquery_02.js

10 jQuery: Show/Hide/Toggle – Fade CONTINUED Also like the show(), hide(), and toggle() methods, the fadeIn(), fadeout(), and fadeToggle() can also include an optional callback along with speed parameter to call a function (see W3Schools jQuery Effects – Fading for reference)jQuery Effects – Fading function callThisFunctionWhenDone() { alert("Finished the fade animation!"); } $("#fadeDivInCallback").click( function() { $("#targetCallback").fadeIn(1500, callThisFunctionWhenDone); // Do NOT put parentheses after the function name }); $("#fadeDivOutCallback").click( function() { $("#targetCallback").fadeOut(1500, callThisFunctionWhenDone); }); $("#fadeToggleDivCallback").click( function() { $("#targetCallback").fadeToggle(1500, callThisFunctionWhenDone); }); animation_jquery_02.html animation_jquery_02.js

11 jQuery: Show/Hide/Toggle – Slide CONTINUED The slideDown(), slideUp(), and slideToggle() can also set the effect duration in the speed parameter (see W3Schools jQuery Effects – Sliding for reference)jQuery Effects – Sliding $("#slideDivDownDur").click( function() { $("#targetDur").slideDown(2000); // time is in milliseconds }); $("#slideDivUpDur").click( function() { $("#targetDur").slideUp(2000); }); $("#slideToggleDivDur").click( function() { $("#targetDur").slideToggle(2000); }); animation_jquery_03.html animation_jquery_03.js

12 jQuery: Show/Hide/Toggle – Slide CONTINUED The slideDown(), slideUp(), and slideToggle() can also include an optional callback in the speed parameter to call a function (see W3Schools jQuery Effects – Sliding for reference)jQuery Effects – Sliding function callThisFunctionWhenDone() { alert("Finished the slide animation!"); } $("#slideDivDownCallback").click( function() { $("#targetCallback").slideDown(1500, callThisFunctionWhenDone); }); // Do NOT put parentheses after the function name! $("#slideDivUpCallback").click( function() { $("#targetCallback").slideUp(1500, callThisFunctionWhenDone); }); $("#slideToggleDivCallback").click( function() { $("#targetCallback").slideToggle(1500, callThisFunctionWhenDone); }); animation_jquery_03.html animation_jquery_03.js

13 jQuery: Show/Hide/Toggle – Slide CONTINUED The slideDown(), slideUp(), and slideToggle() can also include an optional callback in the speed parameter to call a function (see W3Schools jQuery Effects – Sliding for reference)jQuery Effects – Sliding function callThisFunctionWhenDone() { alert("Finished the slide animation!"); } $("#slideDivDownCallback").click( function() { $("#targetCallback").slideDown(1500, callThisFunctionWhenDone); }); // Do NOT put parentheses after the function name! $("#slideDivUpCallback").click( function() { $("#targetCallback").slideUp(1500, callThisFunctionWhenDone); }); $("#slideToggleDivCallback").click( function() { $("#targetCallback").slideToggle(1500, callThisFunctionWhenDone); }); animation_jquery_03.html animation_jquery_03.js

14 jQuery: click and animate Methods The jQuery click(), animate(), and css() methods can be used together to create a variety of animation effects (see W3Schools jQuery click() Method, jQuery animate() Method and jQuery css() Method for reference)jQuery click() MethodjQuery animate() MethodjQuery css() Method $(document).ready(function(){ $("button").click(function(){ $("div").animate({ height:'toggle' // 'toggle' is a keyword that toggles height to 0 }); The click() method triggers the click event, or attaches a function to run when a click event occurs. The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px"). You can also use "+=" or "-=" for relative animations. NOTE: String values cannot be animated (like "background-color:red"). yh jQuery click: jQuery animate: jQuery css: animation_jquery_04.html

15 jQuery: click and animate Methods CONTINUED Below is an example of using all three of the click(), animate(), and css() methods for a unique animation effects (see W3Schools jQuery click() Method, jQuery animate() Method and jQuery css() Method for reference)jQuery click() MethodjQuery animate() MethodjQuery css() Method $(document).ready(function(){ $("button").click(function(){ startAnimation(); function startAnimation(){ $("div").animate({height:444},"slow"); $("div").animate({width:444},"slow"); $("div").css("background-color","blue"); $("div").animate({height:111},"slow"); $("div").animate({width:111},"slow",startAnimation); // calls itself } }); The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. animation_jquery_05.html

16 Basic Animation (JavaScript and jQuery): Links JavaScript Animation Tutorial JavaScript Animation Tutorial JavaScript Animation (Tutorials Point) JavaScript Animation JavaScript Image Slider (No jQuery) JavaScript Image Slider (No jQuery) JavaScript Collapsible Panels (No jQuery) JavaScript Collapsible Panels (No jQuery) JavaScript Slide Show (No jQuery) JavaScript Slide Show (No jQuery) 35 jQuery Animation Tutorials 35 jQuery Animation Tutorials script.aculo.us Animation Library script.aculo.us Animation Library Building an Image Slideshow Tutorial (JavaScript Kit) Building an Image Slideshow Tutorial