Jquery: Animations

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 <head> // meta, title, css <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function() { // your javascript and jQuery code goes here }); </script> </head> 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..

Jquery: Animations

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support