Download to read offline
Uploaded byGilbert Guerrero
Artdm170 Week4 Java Script Effects
This document provides instructions for using jQuery effects in a web page. It includes examples of how to hide and show an element, toggle visibility, add fading and animated effects, and use jQuery events. Functions are demonstrated for fading images in a slideshow. Students are assigned homework to create a basic jQuery page with fading and growing image effects, and are notified that Flash topics will be covered next week.
More Related Content
Similar to Artdm170 Week4 Java Script Effects
Artdm170 Week4 Java Script Effects
- 1. ARTDM 170, Week4: JavaScript Effects Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170/
- 2.
- 3. Put your filesin 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
- 4.
- 5. JavaScript Frameworks • Prototype and Scriptaculous ‣ http://prototypejs.org ‣ http://script.aculo.us • jQuery ‣ http://jquery.com
- 6.
- 7. Create a NewWeb Page Open Dreamweaver
- 8. Add CSS andan 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>
- 9. Add jQuery tothe page • Put this between the <head> tags, all on one line <script type="text/javascript" src="js/jquery-1.4.1.min.js"> </script>
- 10. Hide and Show $('#box').hide(); $('#box').show(); Example: <divid="box"><img src="pic1.jpg" /></div> <a href="#" onclick="$('#box').hide(); return false;">Hide</a> <a href="#" onclick="$('#box').show(); return false;">Show</a>
- 11. Toggle $('#box').toggle(); Example: <div id="box"><img src="pic1.jpg"/></div> <a href="#" onclick="$('#box').toggle(); return false;">Show/Hide</a>
- 12. Effects • jQuery includes a set of simple, standard animations ‣ List of effects
- 13. Fade Out andFade In $('#box').fadeOut(1000); $('#box').fadeIn(1000);
- 14.
- 15. Events • jQuery includes a set of methods with behaviors that respond to user interactions ‣ List of events
- 16. 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>
- 17. 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>
- 18. Functions function slide() { $imgs.eq( pos++ ).fadeIn(1000, function() { if( pos == $imgs.length ){ pos = 0; $imgs.css("display","none"); } slide(); }); }
- 19. Add an overlayto 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
- 20. Group Projects ...thereʼs onemore thing!
- 21. Homework due Feb23 • 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