Embed Size (px)
Citation preview
BIT116: ScriptingLecture 19
Monday, December 1st , 2014
Instructor: Craig Duckett
Basic Animation: JavaScript and jQuery
2
ANNOUNCEMENTS
Assignment 4 due TONIGHT in StudentTracker by MIDNIGHT
Assignment 4 Revision and Extra Credit due Monday, December 8, by MIDNIGHT
FINAL EXAM is Monday, December 8; one large index card is allowed
The “Final Exam Study Guide” is now posted on the website
4
Basic Animation
5
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• CSS to style the DIV hidden or visible• JavaScript to perform the action
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_js_01.html
6
JavaScript: Show/Hide/Toggle CONTINUED
This is the easy part. Simply create some links like you would to another page, but here we will place a '#' in the href attributes instead of a page URL.
<a href="#">Show</a> <a href="#">Hide</a> <a href="#">Toggle</a>
You could also do the same thing using buttons and giving them unique ids:
<input type="button" value="Show" id="showDiv"><input type="button" value="Hide" id="hideDiv"><input type="button" value="Toggle" id="toggleDiv">
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_js_01.html
7
JavaScript: Show/Hide/Toggle CONTINUED
Then create the DIV element you want to show and hide. For this example, the DIV will appear where ever you place it on the page design. So be sure to position the DIV where you want it to show up. Make sure that your DIV has a unique id on it, in our example it is toggleText.
<div id="toggleText" style="display:block;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
Here I also give the div a style 'display:block' which displays an element as a block element (like a <p> paragraph) that we can later use to hide and show the div. (See w3Schools CSS Display Property for reference)
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_js_01.html
8
JavaScript: Show/Hide/Toggle CONTINUED
Next, either in <script> in the <head> or a separate .js file, I create three functions that will show(), hide(), or toggle() the div by getting its id. I create these functions using getElementbyId("toggleText") and the style display property (See w3Schools Style Display Property for reference)
To hide:
function hide() {var hideDiv = document.getElementById("toggleText");hideDiv.style.display = "none";
}
To show:
function show() {var showDiv = document.getElementById("toggleText");showDiv.style.display = "block";
}
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_js_01.html
9
JavaScript: Show/Hide/Toggle CONTINUED
For the toggle() function I set up an if/else to toggle between displaying or not displaying the div based on its current state.
To toggle:
function toggle() {var toggleDiv = document.getElementById("toggleText");if(toggleDiv.style.display == "block") {
toggleDiv.style.display = "none"; }
else {toggleDiv.style.display = "block";
}}
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_js_01.html
10
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)
$(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: http://api.jquery.com/show/jQuery hide: http://api.jquery.com/hide/ jQuery toggle: http://api.jquery.com/toggle/
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_01.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_01.js
11
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)
// 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);});
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_01.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_01.js
12
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)
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);
});
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_01.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_01.js
13
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)
$(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();});
});
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_02.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_02.js
jQuery fadeIn: http://api.jquery.com/fadein/jQuery fadeOut: http://api.jquery.com/fadeout/jQuery fadeToggle: http://api.jquery.com/fadetoggle/
14
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)
// 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);});
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_02.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_02.js
15
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)
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);
});
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_02.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_02.js
16
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)
$("#slideDivDownDur").click( function() {$("#targetDur").slideDown(2000); // time is in
milliseconds});$("#slideDivUpDur").click( function() {
$("#targetDur").slideUp(2000); });$("#slideToggleDivDur").click( function() {
$("#targetDur").slideToggle(2000);});
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_03.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_03.js
17
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)
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);
});
18
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)
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);
});
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_03.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_03.js
19
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)
$(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").
jQuery click: http://api.jquery.com/click/ jQuery animate: http://api.jquery.com/animate/jQuery css: http://api.jquery.com/css/
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_04.html
20
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)
$(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.
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_jquery_05.html
21
Other Types of Basic Animation and Effects with Straight JavaScript
Fade-Out and Fade-In Using CSS Opacity
Because JavaScript can be used to modify or change CSS styles in the code, a variety of effects can be accomplished.
One effect involves changing the CSS opacity property to produce fading in or fading out of images on the page (see W3Schools JavaScript HTML DOM - Changing CSS and CSS3 opacity Property for reference)
The first example uses the JavaScript date() object to produce a number from the primitive value of the date() object (e.g., 1393997151478) and then a second number from the primitive value of the date() object (e.g., 1393997151678) to work as part of a convoluted function tying opacity changes to the system clock.
Of course, this same type of thing can be accomplished in a much simpler way by hard-coding in values (and a bit of trial-and-error in order to tease out the desired duration and behavior).
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_js_02.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_js_02b.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_js_03.html http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_js_03b.html
22
Other Types of Basic Animation and Effects with Straight JavaScript
Movement Across the Page
Because JavaScript can be used to modify or change CSS styles in the code, a variety of effects can be accomplished.
One effect involves changing the CSS position property to produce movement of elements (like an image or a div) across the page using events (see W3Schools JavaScript HTML DOM - Changing CSS and CSS Position Property for reference)
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_js_04.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_js_05.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_js_06.html
23
Other Types of Basic Animation and Effects with Straight JavaScript
Rollover Effect
Rollover effects are relatively easy to create in JavaScript using the onmouseover and onmouseout events (see W3Schools onmouseover Event and onmouseout Event for reference)
http://faculty.cascadia.edu/cduckett/bit116/Lecture_19/animation_js_07.html
24
Other Animation Techniques
25
Animation 01 Example
HTML5/CSS3/JavaScript(jQuery)
This example makes use of the HTML/CSS/JavaScript triad to produce a fully realized synergistic whole• The structural design of the page and its elements is done with HTML• The formatting of the content in placement, colors, shading, fonts, etc is done with CSS• The dynamic features of the page is done with JavaScript(jQuery)
Except for the general content offered by the HTML page, each piece by itself is relatively useless. Each piece working together produces an effect greater than the sum of their individual effects. To produce this page, some third-party "tools" were used, specifically:
• Komodo or Notepad++ or Dreamweaver• Colorzilla
• Ultimate CSS Gradient Generator• Code Canyon
• CSS Gradient Generator ver.1.1• jQuery
• .animate()
jQuery .animate() - https://api.jquery.com/animate/W3Schools .animate() - http://www.w3schools.com/jquery/eff_animate.asp
26
Animation 01 Example
jQuery animate() Method
The jQuery animate() method allows you to move or "animate" any HTML element, be it a tag or a div, and does this according to an event (like "click") and that element's unique id.
The jQuery animation process can make use of:
• styles – properties like height, width, margin, padding, top, left, right, border, etc• speed – in milliseconds, "slow" (600 milliseconds), "fast" (200 milliseconds)
[default is 400 milliseconds]• easing – "swing" (slower at the beginning/end, faster in the middle), "linear" (constant speed)• callback – An optional function to be executed after the animation completes
jQuery .animate() - https://api.jquery.com/animate/W3Schools .animate() - http://www.w3schools.com/jquery/eff_animate.asp
http://faculty.cascadia.edu/cduckett/bit116/Lecture_18/NO_CSS_JAVASCRIPT.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_18/animation_01.htmlhttp://faculty.cascadia.edu/cduckett/bit116/Lecture_18/animation_01.csshttp://faculty.cascadia.edu/cduckett/bit116/Lecture_18/animation_01.js
27
Other Animation Examples (Intermediate/Advanced)
• Slideshow (Slideshow Directory)
• Dragdrop (DragDrop Directory)
• Shooter (Shooter Directory)
28
Assorted Links
• Slideshow Builder• codecanyon.net (Recommended)• CSS Gradient Coder Online (Recommended)• jQuery Effects Listed: http://api.jquery.com/category/effects/
29
Basic Animation (JavaScript and jQuery): Links
• JavaScript Animation Tutorial• JavaScript Animation (Tutorials Point)• JavaScript Image Slider (No jQuery)• JavaScript Collapsible Panels (No jQuery)• JavaScript Slide Show (No jQuery)• 35 jQuery Animation Tutorials• script.aculo.us Animation Library• Building an Image Slideshow Tutorial (JavaScript Kit)
30
JUST FOR FUN: HTML5 Animation | Canvas Links
• Canvas Animation Programming 101• Introduction to HTML5 Animation• How to Make Sprite Animations with HTML5 Canvas• HTML5 Canvas Tutorials• Create Slick HTML5 Animations• Animate Your HTML• HTML5Maker• Hippo Animator 3• Animatron
31
Please begin working on the LECTURE 19 In-Class Exercises.
When you have completed your ICE, call the Instructor over to verify your work. If you have questions about your work, please call over the Instructor to clarify.
Once you have completed your ICEs, you are free to go for the day.
If you don't finish your ICEs by the end of class, you will still get full credit for actively doing the work, but it is greatly recommended you finish any outstanding ICEs outside of class.
Lecture 19
