A Smarter Way to Learn jQuery

Fill in the blank to animate the div out of sight above the upper edge 1000 pixels--as you learned to do it in Chapter 39.

$("div#extra").animate__________

({top: "-1000px"});

^ *${top: •-1000px•}$; *$

Fill in the blank to animate the div out of sight above the upper edge 1000 pixels by changing the margin.

$("div#extra").animate({marginTop: _________

"-=1000px"});

^ *•-=1000px•}\); *$

Fill in the blank to animate the div out of sight above the upper edge 1000 pixels by changing the margin.

$("div#extra").animate_______ "-=1000px"});

({marginTop:

^ *\({marginTop: *$

Fill in the blank to animate the div out of sight above the upper edge 1000 pixels by changing the margin.

$("div#extra").animate________________

({marginTop: "-=1000px"});

^ *${marginTop: •-=1000px•}$; *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to animate the div 300 pixels from the left edge of the screen by changing its margin.

$("div#daily").animate({marginLeft: "+=300px"});

Animate $(this) 10% up from the bottom of the screen by changing its margin.

$(this).animate({marginBottom: "+=10%"});

$`(`this`)`.`animate`(`{`margin`Bottom`:`1space"`+`=`10`%`"`}`)`;

Animate an image 100 pixels in from the left by changing its margin. The id of the image is "dog".

$("img#dog").animate({marginLeft: "+=100px"});

Measure the height of $(this) and change its margin by that amount so it disappears off the top of the screen. Make the up variable that stores the height.

var heightThis = $(this).height();
$(this).animate({marginTop: "-=" + heightThis + "px"});

^var (.+) = \$$this$\.height;\n *\$$this$\.animate${marginTop: •-=• \+ \1 \+ •px•\}$; *$

Measure the width of a div and fly it two widths in from the left by changing its margin. Make up the div's id and the variable that stores the width.

var wDiv = $("div#fly").width();
$("div#fly").animate({marginLeft: "+=" + wDiv * 2 + "px"});

^ *var (.+) = \$$•div#(.+)•$\.width;\n *\$$•div#\2•$\.animate${marginLeft: •\+=• \+ \1 \* 2 \+ •px•}$; *$

Measure the width of a div and assign it to a variable. Then measure the width of an image including the image's padding and border. Assign it to a variable. Make up the ids and variable names.

var wDiv = $("div#main").width();
var wPic = $("img#loris").outerWidth();

^ *var .+ = \$$•div#.+•$\.width;\n *var .+ = \$$•img#.+•$\.outerWidth; *$

The width of a div has been assigned to the variable wDiv. The width of an image inside the div has been assigned to the variable wPic. The id of the image is "monarch." Fly the image to the horizontal center of the div by changing its margin. Do it with a single statement.

$("img#monarch").animate({marginLeft: "+=" +
(wDiv - wPic) / 2 + "px"});

^ *\$$•img#monarch•$\.animate${marginLeft: •\+=• \+ \(wDiv - wPic$ \/ 2 \+ •px•}\); *$

An image's offsets for centering horizontally and vertically are stored in the variables picHoriz and picVert. The id of the image is "loris." In a single statement, fly the image to the horizontal and vertical centers of the screen diagonally by changing the margins.

$("img#loris").animate({marginLeft: "+=" +
picHoriz + "px", marginTop: "+=" + picVert + "px"});

^ *\$$•img#loris•$\.animate${marginLeft: •\+=• \+ picHoriz \+ •px•, marginTop: •\+=• \+ picVert \+ •px•}$; *$

Animate an image 100 pixels in from the left by changing its margin. The id of the image is "dog".

$("img#dog").animate({marginLeft: "+=100px"});

^ *\$$•img#dog•$\.animate${marginLeft: •\+=100px•}$; *$