basic animation: javascript and jquery. 1 week from today (next tuesday) you're allowed to...
TRANSCRIPT
BIT116: Scripting
Basic Animation: JavaScript and jQuery
2
Final Exam 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
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)
$(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/
animation_jquery_01.htmlanimation_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)
// 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.htmlanimation_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)
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.htmlanimation_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)
$(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: http://api.jquery.com/fadein/jQuery fadeOut: http://api.jquery.com/fadeout/jQuery fadeToggle: http://api.jquery.com/fadetoggle/
animation_jquery_02.htmlanimation_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)
// 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.htmlanimation_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)
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.htmlanimation_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)
$("#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.htmlanimation_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)
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.htmlanimation_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)
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.htmlanimation_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)
$(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: http://api.jquery.com/click/ jQuery animate: http://api.jquery.com/animate/jQuery css: http://api.jquery.com/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)
$(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 (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)