Chapter 9 How to use effects and animations

Chapter 9 How to use effects and animations

Chapter 9 How to use effects and animations 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 1 The basic methods for jQuery effects show() hide() toggle() slideDown() slideUp() slideToggle() fadeIn()

fadeOut() fadeToggle() fadeTo() 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 2 The basic syntax for all of the methods except the fadeTo method methodName([duration][, callback]) The basic syntax for the fadeTo method fadeTo(duration, opacity[, callback]) 2017, Mike Murach & Associates, Inc.

Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 3 HTML for a heading that is animated after the web page is loaded

Temporarily under construction!

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); Chaining with fadeTo methods $("#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 ); 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 4 The FAQs application as the text for a heading

is displayed 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 5 The HTML for the FAQs application

jQuery FAQs

What is jQuery?

Why is jQuery becoming so popular?

Which is harder to learn: jQuery or JavaScript?

2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 6 The jQuery with slideDown and fadeOut methods $(document).ready(function() { $("#faqs h2").click(

function() { $(this).toggleClass("minus"); if ($(this).attr("class") != "minus") { $(this).next().fadeOut(1000); } else { $(this).next().slideDown(1000); } } ); // end click }); // end ready 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 7

The jQuery with the slideToggle method $(document).ready(function() { $("#faqs h2").click( function() { $(this).toggleClass("minus"); $(this).next().slideToggle(1000); } ); // end click }); // end ready 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 8 Terms effect

animation callback function 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 9 A Slide Show application with fading out and fading in 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 10

The HTML for the slide show

Fishing Slide Show

Casting on the Upper Kings

Casting on the Upper Kings Casting on the Lower Kings Catch and Release on the Big Horn Catching on the South Fork The Lures for Catching

2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 11 The critical CSS for the slide show img { height: 250px; } #slides img { display: none; } 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.)

C9, Slide 12 One way to code the jQuery $(document).ready(function() { // create an array of the slide images var image, imageCounter = 0, imageCache = []; $("#slides img").each(function() { image = new Image(); image.src = $(this).attr("src"); image.title = $(this).attr("alt"); imageCache[imageCounter] = image; imageCounter++; }); // start slide show imageCounter = 0; var nextImage; setInterval( function () {

$("#caption").fadeOut(1000); 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 13 One way to code the jQuery (continued) $("#slide").fadeOut(1000, function() { imageCounter = (imageCounter + 1) % imageCache.length; nextImage = imageCache[imageCounter]; $("#slide").attr("src", nextImage.src).fadeIn(1000); $("#caption").text( nextImage.title).fadeIn(1000);

} ); }); }, 3000); 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 14 Another way to code the jQuery $(document).ready(function() { var nextSlide = $("#slides img:first-child"); var nextCaption;

var nextSlideSource; // start slide show setInterval( function () { $("#caption").fadeOut(1000); $("#slide").fadeOut(1000, function () { if (nextSlide.next().length == 0) { nextSlide = $("#slides img:first-child"); } else { nextSlide = nextSlide.next(); } 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.)

C9, Slide 15 Another way to code the jQuery (continued) } nextSlideSource = nextSlide.attr("src"); nextCaption = nextSlide.attr("alt"); $("#slide").attr("src", nextSlideSource).fadeIn(1000); $("#caption").text( nextCaption).fadeIn(1000); ); }); },

3000); 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 16 Extra 9-1 Modify an Image Swap application Fade the caption and image out and in. 2017, Mike Murach & Associates, Inc. Murach's JavaScript and jQuery (3rd Ed.) C9, Slide 17

Recently Viewed Presentations

  • Sadržaj prezentacije - MINGO

    Sadržaj prezentacije - MINGO

    Operativni program „Konkurentnost i kohezija 2014. - 2020." INVESTICIJSKI PRIORITET: 1.b Promicanje poslovnih ulaganja u inovacijama i istraživanjima te razvoj veza i sinergija između poduzeća, IR centara i visokog obrazovanja, posebno razvoja proizvoda i usluga, tehnološko povezivanje, socijalna inovacija, ekološka...
  • Lets talk about Disability & Creative Spaces

    Lets talk about Disability & Creative Spaces

    AODA = Accessibility for Ontarians with Disabilities Act. Goal = Make Ontario accessible . Based on = Equality, Dignity and Respect. 5 areas of requirements: Integrated Accessibility Standard. Customer Service. Information and Communication. Employment. Transportation . Design of Public Spaces....
  • Unit 3 Lesson 9

    Unit 3 Lesson 9

    Fundamentalism taken to violence . Islamic traditionalism/Islamism (a type of religious fundamentalism): Movement that favors a return to or preservation of traditional, pre-modern Islam and resists Westernization and globalization.
  • Daniel - Amazon S3

    Daniel - Amazon S3

    Daniel 9:27. And he will make a firm covenant with the many for one week, but in the middle of the week he will put a stop to sacrifice and grain offering; and on the wing of abominations . will...
  • Developing a Brand Equity Measurement and Management System

    Developing a Brand Equity Measurement and Management System

    The Brand Value Chain. Broader perspective than just the CBBE model . The brand value chain is a structured approach to assessing the sources and outcomes of brand equity and the manner by which marketing activities create brand value.
  • SONG LYRICS with FIGURATIVE LANGUAGE

    SONG LYRICS with FIGURATIVE LANGUAGE

    She's a Saturn with a sunroof. With her brown hair a-blowing. She's a soft place to land. And a good feeling knowing. She's a warm conversation
  • Chapter 27: The New Frontier and the Great Society

    Chapter 27: The New Frontier and the Great Society

    Chapter 27: The New Frontier and the Great Society. ... Johnson and Kennedy were opposites appearance wise, Kennedy had appealed to the American public with his good looks and charm, Johnson was crude and a large and sometimes intimidating man.
  • STP in the Managed Funds Industry

    STP in the Managed Funds Industry

    AU Investment Funds Market Why is MFundEC needed? Why is MFundEC needed? Potential Savings Estimates through STP Coverage of Standards The standards that describe the information flows consist of: Use Case model that describes the business requirements Message data and...