A Smarter Way to Learn jQuery

What keyword do you use to enlarge an element so the user can see it grow?

animate

^ *animate *$

Fill in the blank to grow the height.

$("p#ex_1")__________{height: "10em"});

.animate(

^ *\.animate\( *$

Fill in the blank to grow the height.

$("p#ex_1").animate({______ "10em"});

height:

^ *height: *$

Fill in the blank to grow the height to 10em.

$("p#ex_1").animate({height: _________

"10em"});

^ *•10em•}\); *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to grow the paragraph to a height of 10em.

$("p#ex_1").animate({height: "10em"});

Grow all divs to a width of 70%.

$("div").animate({width: "70%"});

$`(`"`div`"`)`.`animate`(`{`width:`1space"`70%`"`}`)`;

Grow paragraphs whose class is "expandable" to a height of 200 pixels.

$("p.expandable").animate({height: "200px"});

Grow a div to a 300-pixel width. Make up its id.

$("div#expandable").animate({width: "300px"});

^ *\$$•div#.+•$\.animate${width: •300px•}$; *$

Grow an image to a new width and height, in pixels. Make up the image's id and the width and height numbers.

$("img#loris").animate({width: "300px",
height: "200px"});

^ *\$$•img#.+•$\.animate${width: •[0-9]+px•, height: •[0-9]+px•}$; *$

Grow two paragraphs to 4em height. Make up their ids.

$("p#graph2, p#graph3").animate({height: "4em"});

^ *\$$•p#.+, p#.+•$\.animate${height: •4em•}$; *$

In a single statement, replace a div's classes with two new classes and grow it to 30% width. Make up its id and new class names.

$("div#d2").attr("class", "bigger better")
.animate({width: "30%"});

^ *\$$•div#.+•$\.attr$•class•, •.+ .+•$\.animate${width: •30%•}$; *$

When the user mouses over any div, its width grows to 40% and its height grows to 400 pixels.

$("div").on("mouseover", function() {
$(this).animate({width: "40%", height: "400px"});
});

^ *\$$•div•$\.on$•mouseover•, function\($ {\n *\$$this$\.animate${width: •40%•, height: •400px•}$;\n *}\); *$