jQuery: Animations

ATLS 3020 - Digital Media 2 Week 9 - Day 2 jQuery Overview

● All HTML must be valid!

● Define elements in HTML ● Styling and presentation in CSS ● Add interactivity with javascript/jQuery jQuery Overview

All jQuery must go inside of $(document).ready(function(){})

HTML // meta, title, css

jQuery Overview

You can only add jQuery variables with jQuery methods and javascript variables with javascript methods

Javscript We have a function that changes function change_color() { the color of an element: // changes the color of something }

We can use ONE of the two options. We cannot combine document.getElementById() with the click method. And we cannot combine $(selector) with the onclick method.

Javscript jQuery var button; $("#button").click(change_color); button = document.getElementById("button"); button.onclick(change_color); Some jQuery animations jQuery Makes a hidden element fade into view $("#banner").fadeIn(); jQuery Hides an element by fading it out $("#banner").fadeOut(); jQuery Makes a visible element side out of view $("#banner").slideUp(); jQuery $("#banner").slideDown(); Makes a hidden element slide into view jQuery Alternates between hiding and showing the $("#banner").toggle(); “banner” id jQuery Alternates between hiding and showing the $("#banner").slideToggle(); “banner” id, while sliding in and out jQuery and CSS

We can also edit CSS directly with jQuery: $(selector).css("property", "value");

jQuery $("#banner").css("font-size", "100px"); Changes the font-size of the banner element

jQuery $("#banner").css("color", "#00f"); Changes the font color of the banner element

Or change multiple properties at once: $(selector).css({ "attribute", "value", jQuery "attribute", "value" }); $("#banner").css({ "font-size", "100px", "color", "#00f" }); Exercise (pairs) 1. Download the starter code 2. Write code, so that: a. when button 1 is clicked, it changes the text size of the first header. b. when button 2 is clicked, it changes the background color of the first paragraph. c. when button 3 is clicked, it toggles the second paragraph. Aminations

The jQuery animate function is awesome! We can animate properties by using this one function. Simple version: $(selector).animate({properties}, duration);

Javscript $("banner").animate({ Changes the opacity to 25% and opacity: 0.25, fontSize: "3em" changes the font size to 3em, }, 400); over a duration of 400 milliseconds

For more information visit: http://api.jquery.com/animate/ Aminations with easing jQuery can also add easing to the animation. Types of Easing: ● swing This controls the animation style ● linear $(selector).animate({properties}, duration, easing);

Javscript $("banner").animate({ Changes the opacity to 25% and opacity: 0.25, changes the font size to 3em, fontSize: "3em" over a duration of 400 milliseconds }, 400, "linear"); with a linear ease jQuery plugins also provide for more easing options Exercise (pairs)

1. Using your code from the first exercise modify it so that each button animates the changes that they made. 2. For button 1, add code inside of your function that will change the font size back to it’s original size. Javascript Timer

Javascript also has a timer that you can use to automate your animations. var timerVar = setInterval(function, duration); clearInterval(timerVar);

Javscript function animate_something() { . . . }; This created a function that will animate something. var timerVar; Then, this function will be called every 5000 timerVar = setInterval(animate_something, 5000); miliseconds (5 seconds).

Javscript This will clear the timer and stop running the clearInterval(timerVar); function. Lab 12 Copy your code from Lab 10 (6 buttons) into this lab. Part 1: Change the functions for 3 of your buttons. Using the animate function, make them animate the changes have. Part 2: Add another element to the page. Add a function that will animate or somehow change this element using jQuery. Call this function in a “setInterval” timer. Add a 7th button on the page. When this button is clicked, it will “clearInterval” of the function call from the step before.