By the end of today, you will be able to:
.animate()
method.
We learned about JS Object Literals and animated slideshows. We'll talk about animation a bit later.
fred.age
Suppose we want to define an object to represent Ron. Which is correct:
ron = {age: 17, hair color: red};
var ron = [age: 17, hair_color: red];
var ron = { age: 17; hair_color: "red"};
var ron = { age: 17, hair_color: "red"};
What's the syntax error in the following object creation?
var ron = { age: 17, hair color: red };
red should be in quotation marks
uses var
when it shouldn't
commas between pairs should be a semi-colon
invalid property name
Suppose we want change his age to 18. Which is correct:
ron.age = 18;
ron[age] = 18;
ron.age++;
ron.setAge(18);
jQuery animations are easy to do, but very limited. The syntax:
$(sel).animate(js_object, duration);
Some details:
50, 100, 150, 200, 250, 300, 350, 400, 450, 500
A lot of cool effects can be built on top of the basic animation
idea. jQuery has methods to have something (an element on the page)
fadeOut
, fadeIn
, slideUp
, slideDown
,
and much more.
Here's a page that demonstrates some jQuery effects. None of these require more than a line of code.
Note that you can combine these with other techniques we've
learned. For example, you can have a drop-down
menu slideDown
or you can have a gallery
image fadeIn
. Your madlib could have the
story slideDown
. Be creative!
As you know, we can even chain several animations together. In the example below, we have an animation that enlarges this box and thickens the border.
Write some jQuery animation code to animate the box shrinking back to its original state, but twice as fast as the enlargement.
Your solution might look like this:
var large = {width: "500px", height: "100px", "border-width": "4px"}; var small = {width: "0px", height: "50px", "border-width": "2px"}; $("#box1") .css(small) // instantly to this state .animate(large,1500) .animate(small,750);
Did you think of using the JS variable that holds the initial state object?
When you ask jQuery to modify a set of things, it will modify each one
in the set. This makes it really easy to add the same function as an
event handler to lots of different elements, just by using a CSS selector
that matches more than one thing. In the following example, we have three
boxes, all with the class alice
, and we want them to grow by
50px each time you click on them. Try it! (I wanted to
use AliceBlue
as the background color, but it's too pale.)
The jQuery code to do that is here. Note the use of this
to grow only the element that was clicked on, not all three Alices.
Here we have a list of Hagrid's Horribles. It's a simple ordered
list (OL), and the ID is hagrids
.
Define a function named engorgio
that increases the font
size of an element by 10px. Attach that function as an event handler for
click events to all the elements of the list, and then try it
out. Clicking on one item in the list should increase by 10px the
font size of that element only, and none of the others.
(It might be less frightening to define reductio
, but
harder to see.)
Your solution might look like this:
function engorgio() { var bigger = 10 + parseInt($(this).css("font-size")); $(this).animate({"font-size": bigger+"px"}); } $("#hagrids li").click(engorgio);
Below is a variation on the final sliding slideshow we saw in the reading. Jump down and look at it, and then come back and read through the code.
Here's the HTML. Pretty simple, so far. We added a couple of buttons.
Here's the CSS. This is pretty tricky!
Here's the JS. Tricky, but not very tricky.
We made a few small changes from the reading:
Here it is in action:
Write some JS code to implement the previous slide button. Try it out here:
Your solution might look like this:
function prevSlide() { currentSlideIndex--; if( currentSlideIndex < 0 ) { currentSlideIndex = $("#slides4 li").length - 1; } displaySlide(); } $("#prevSlideButton").click(prevSlide);
We hope that after these activities you have a good understanding of:
Will be posted later, visit again after .
Quiz answers:
1. D
2. D definitely but A might also be true
3. A definitely but C might also be true, if Ron is 17. B is *almost*
correct, but age
would be a variable, not a