1 / 23

CSC 3084: Web Development and Programming

CSC 3084: Web Development and Programming. Chapter 8: How to Use Effects and Animations. Chapter Overview. By the end of this chapter, you should be able to : Use jQuery to add effects and animations to a web page. Describe how to stop and start a slide show that uses an interval timer.

ceana
Download Presentation

CSC 3084: Web Development and Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSC 3084:Web Development and Programming Chapter 8: How to Use Effects and Animations

  2. Chapter Overview • By the end of this chapter, you should be able to: • Use jQuery to add effects and animations to a web page. • Describe how to stop and start a slide show that uses an interval timer. • In general terms, describe how the jQuery animate method works. • Explain how the chaining of effect or animate methods works and how the callback functions for these methods can affect the results. • Describe the use of the delay and stop methods with effects and animations. • Describe the use of easings with effects and animations.

  3. The Basic Methods for jQuery Effects (“Effects” = Animations) • All but the last method take a duration parameter in milliseconds. If no parameter is given, the effect happens instantaneously. show() Display the elements from upper left to lower right hide() Hide the elements from lower right to upper left toggle() Display or hide the selected elements slideDown() Display the selected elements with a sliding motion slideUp() Hide the selected elements with a sliding motion slideToggle() Display or hide the elements with a sliding motion fadeIn() Display the elements by fading them in to opaque fadeOut() Hide the elements by fading them out to transparent fadeToggle() Display or hide the elements by fading them in or out fadeTo() Adjust the opacity of the selected elements to the opacity set by the second parameter. Duration is first parameter

  4. Basic Syntax of these Methods • The basic syntax for all of the methods except the fadeTomethod:methodName([duration][, callback]) • The basic syntax for the fadeTomethod:fadeTo(duration, opacity[, callback]) • The callback parameter is for a function that is called after the effect has finished. If more than one element is selected, the callback is run once for each element.

  5. Examples of Effects • HTML for a heading that is animated after the web page is loaded:<h1 id="startup_message">Temporarily under construction!</h1> • jQuery that fades the heading out over 5 seconds:$("#startup_message").fadeOut(5000); • jQuery that uses chaining to fade the heading out and slide it back down:$("#startup_message").fadeOut(5000).slideDown(1000);

  6. Examples of Effects • Chaining with fadeTomethods:$("#startup_message").fadeTo(5000, .2) .fadeTo(1000, 1); • jQuery with a callback function that gets the same result as the chaining: $("#startup_message").fadeTo(5000, .2, function() { // start callback function $(this).fadeTo(1000, 1); } // end callback function );

  7. FAQs Application with Effects • See JS Textbook Files\book_apps\ch08\faqs_effects\index.html • In the .js file there are two blocks of code that achieve the same results • Remember that the toggle method is no longer available in the latest versions of jQuery

  8. Slide Show Application with Fading In and Out • See JS Textbook Files\book_apps\ch08\slide_show_fading_1 and JS Textbook Files\book_apps\ch08\slide_show_fading_2

  9. Slide Show with Stop/Restart • See JS Textbook Files\book_apps\ch08\slide_show_stop

  10. The animate Method • The basic syntax for the animate method:animate({properties}[, duration][, callback]) • An animated heading that is moving into the “faqs” section: • The CSS for the h1 heading: #faqs h1 { position: relative; left: -175px; font-size: 75%; opacity: .2; }

  11. The animate Method • The properties map consists of CSS properties written in camel case instead of their normal hyphen style • Numeric properties written without quotes are assumed to be in units pixels • For non-numeric properties and numeric values in units other than pixels, the value must be put in quotation marks • Color transitions aren’t handled properly in jQuery, but they are by jQueryUI

  12. Two Animation Styles • Without a callback function: $("#faqs h1").animate( { fontSize: "275%", opacity: 1, left: 0 }, 2000 ); // end animate • With a callback function: $("#faqs h1").animate( { fontSize: "275%", opacity: 1, left: "+=175" }, 2000, function() { $("#faqs h2").next().fadeIn(1000).fadeOut(1000); } ); // end animate

  13. Example with Two Effects • See JS Textbook Files\book_apps\ch08\faqs_animation_chaining • The first, second and last definitions of the click callback are different, but accomplish the same result • The first and third definitions are the same (no, I don’t know why there are two copies in there)

  14. Chained Animations $("#faqs h1").click(function() { $(this).animate( { fontSize: "650%", opacity: 1, left: "+=275" }, 2000 ) .animate( { fontSize: "175%", left: "-=275" }, 1000 ) }); // end click

  15. Queued Animations $("#faqs h1").click(function() { $(this).animate( { fontSize: "650%", opacity: 1, left: "+=275" }, 2000 ); $(this).animate( { fontSize: "175%", left: "-=275" }, 1000 ); }); // end click

  16. An Animation with a Second Animation in its Callback Function $("#faqs h1").click(function() { $(this).animate( { fontSize: "650%", opacity: 1, left: "+=275" }, 2000, function() { $(this).animate( { fontSize: "175%", left: "-=275" }, 1000 ) } )} // end function ); // end click

  17. The delay and stop Methods • delay(duration)Delay the start of the next animation in the queue. • stop([clearQueue] Stop the current animation for the [,jumpToEnd]) selected element. If the first parameter is set to true, the queue is cleared. If the second parameter is set to true, the current animation is completed immediately.

  18. Example of delay Method • HTML for a heading that is displayed when the web page is loaded:<h1 id="startup_message">Temporarily under construction!</h1> • jQuery that fades the heading out after 5 seconds:$("#startup_message").delay(5000).fadeOut(1000);

  19. Example of stop Method • See JS Textbook Files\book_apps\ch08\image_swap_animation_stop • Delete “stop(true).” on lines 13 and 29 to see what happens if the call to stop(true) is omitted

  20. Easings • An easing determines the way an animation is performed • For instance, an easing might: • start slowly and pick up speed as it goes, or • start or end with a bounce • See jqueryui.com/effect/#easing for examples • The default easing is “swing”, not “linear”

  21. Syntax for Easings w/ Animations • The syntax for all the basic methods except fadeTo:methodName([duration][, easing][, callback]) • The syntax for the fadeTomethod:fadeTo(duration, opacity[, easing][, callback]) • The syntax for the basic animate method:animate({properties}[, duration][, easing] [, callback])

  22. Easings Examples • See JS Textbook Files\book_apps\ch08\faqs_easings • Click on the plus/minus signs, as well as the main heading

  23. Carousel Application • See JS Textbook Files\book_apps\ch08\carousel_animation

More Related