Artdm170 Week4 Java Script Effects

ARTDM 170, Week 4:
JavaScript Effects
Gilbert Guerrero
gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-170/

Put your files in my dropbox

• Web page with a rollover animation
• Put files in a folder with your
lastname and first initial
• Example:
smith-h
myPage.html
anim1.gif

JavaScript Frameworks
• Prototype and Scriptaculous
‣ http://prototypejs.org
‣ http://script.aculo.us
• jQuery
‣ http://jquery.com

jQuery
Download http://jquery.com

Create a New Web Page
Open Dreamweaver

Add CSS and an image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>page title</title>
<style type="text/css">

</style>
</head>
<body>
<div id="box"><img src="pic1.jpg" /></div>
</body>
</html>

Add jQuery to the page
• Put this between the <head> tags, all on
one line
<script type="text/javascript"
src="js/jquery-1.4.1.min.js">
</script>

Hide and Show
$('#box').hide();
$('#box').show();
Example:
<a href="#" onclick="$('#box').hide(); return
false;">Hide</a>
<a href="#" onclick="$('#box').show(); return
false;">Show</a>

Toggle
$('#box').toggle();
Example:
<a href="#" onclick="$('#box').toggle(); return
false;">Show/Hide</a>

Effects
• jQuery includes a set of simple,
standard animations
‣ List of effects

Fade Out and Fade In
$('#box').fadeOut(1000);
$('#box').fadeIn(1000);

Animate
$('#box img').animate({width:'90%'}, 1000);

Events
• jQuery includes a set of methods with
behaviors that respond to user
interactions
‣ List of events

DOM Ready Function
• By adding this to the head of your Web
page you can be sure the elements are
loaded before applying effects to them
<script>
$(document).ready(function () {
//add your functions here
});
</script>

Load function
• We can also use this to show a loading
animation that disappears when the page
and all of its images are loaded
<script>
$(window).load(function () {
$('#loadingBox').fadeOut();
});
</script>

Functions
function slide() {
$imgs.eq( pos++ ).fadeIn(1000, function() {
if( pos == $imgs.length ){
pos = 0;
$imgs.css("display","none");
}
slide();
});
}

Add an overlay to your group
project site
• Make the overlay open when user
clicks a button or image
• Add a close button to the overlay to
allow the user to close it
• Use jQuery

Group Projects
...thereʼs one more thing!

Homework due Feb 23
• Create a Web page with jQuery
‣ Make an image fade in, grow, and
fade out
• Work on Group Projects
• Read Chapter 1: Using Flash and
ActionScript 3.0 in the class textbook
AS 3.0 Game Programming University
• Get ready for Adobe Flash next week

Artdm170 Week4 Java Script Effects

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Artdm170 Week4 Java Script Effects

Similar to Artdm170 Week4 Java Script Effects (20)

More from Gilbert Guerrero

More from Gilbert Guerrero (20)

Artdm170 Week4 Java Script Effects