ARTDM 170 Week 4: JavaScript Effects

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

Turn in Homework

Put your ﬁles in my dropbox • Put them in a folder with your lastname and ﬁrst initial example: smith-h index.html page1.html page2.html page3.html

JavaScript Rollover Review Plus a new example: Rollover Slideshow

JavaScript Effects

Prototype and Scriptaculous Download: http://prototypejs.org http://script.aculo.us

jQuery Download: http://jquery.com

Create a New Web Page

Add the script to your pages • Put this between the <head> tags <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

Basics $('#box').hide(); $('#box').show(); $('#box').toggle(); Example: <div id="box"><img src="pic1.jpg" /></div> <a href="#" onClick="$('#box').hide(); return false;">Hide</a>

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

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

Homework due Sept 16 • Create a slideshow with jQuery • Use at least 5 images • Make the images slide in, grow, fade in, drop in from the top, or animate in some way onto the page when a user clicks a thumbnail Get ready for Adobe Flash next week

ARTDM 170 Week 4: JavaScript Effects

0 comments

Notes on slide 1

Favorites, Groups & Events