ARTDM 170 Week 4: JavaScript Effects
•
0 likes•288 views
This document provides instructions for students on using JavaScript effects and jQuery in their homework assignment. Students are asked to submit their files in a folder with their last name and initial in the instructor's Dropbox by September 16th. The document reviews JavaScript rollovers and introduces a new slideshow example. It also discusses the JavaScript libraries Prototype and Scriptaculous before focusing on jQuery. Basic jQuery methods like hide(), show(), toggle() and effects like fadeOut() are demonstrated. Finally, students are instructed to create a slideshow with at least 5 images that animate onto the page using jQuery for their homework.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to ARTDM 170 Week 4: JavaScript Effects
Similar to ARTDM 170 Week 4: JavaScript Effects (20)
More from Gilbert Guerrero
More from Gilbert Guerrero (20)
Recently uploaded
Recently uploaded (20)
ARTDM 170 Week 4: JavaScript Effects
- 1. ARTDM 170, Week 4: JavaScript Effects Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170/
- 3. Put your files in my dropbox • Put them in a folder with your lastname and first initial example: smith-h index.html page1.html page2.html page3.html
- 4. JavaScript Rollover Review Plus a new example: Rollover Slideshow
- 6. Prototype and Scriptaculous Download: http://prototypejs.org http://script.aculo.us
- 8. Create a New Web Page
- 9. 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>
- 10. 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>
- 11. Effects $('#box').fadeOut(1000); $('#box').fadeIn(1000); $('#box img').animate({width:'90%'}, 1000);
- 12. Functions function slide() { $imgs.eq( pos++ ).fadeIn(1000, function() { if( pos == $imgs.length ){ pos = 0; $imgs.css("display","none"); } slide(); }); }
- 13. 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