A Smarter Way to Learn jQuery

Fill in the blank to create a 3-second delay.

$("div#daily").delay(____).animate({left: "15%"});

3000

^ *3000 *$

Fill in the blank to create a 3-second delay.

$("div#daily")._____(3000).animate({left: "15%"});

delay

^ *delay *$

Fill in the blank to create a slow delay.

$("div#daily").____________.animate({left: "15%"});

delay("slow")

^ *delay$•slow•$ *$

Fill in the blank to create a fast delay.

$("div#daily")______________animate({left: "15%"});

.delay("fast").

^ *\.delay$•fast•$\. *$

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to fly $(this) in from the left, with a 4-second delay.

$(this).delay(4000).animate({left: "300px"});

Fill in the blank to delay the move 4 seconds.
$(this)___________animate({left: "300px"});

.delay(4000).

.`delay`(`4000`)`.

Create a slow delay before flying $(this) above the top edge of the screen by 1000 pixels. Do it with the margin method.

$(this).delay("slow").animate({marginTop: "-=1000px"});

Create a fast delay before flying $(this) 10% in from the right edge of the screen. Use the first method you learned, not the margin method.

$(this).delay("fast").animate({right: "10%"});

^ *\$$this$\.delay$•fast•$\.animate${right: •10%•}$; *$

Create a 3-second delay before flying $(this) 400 pixels up from the bottom edge of the screen. Do it by changing the margin.

$(this).delay(3000).animate({marginBottom: "+=400px"});

^ *\$$this$\.delay$3000$\.animate${marginBottom: •\+=400px•}$; *$

Create a delay before flying an image 300 pixels down from the top by changing the margin. Make up the id of the image and the number of seconds for the delay.

$("img#loris").delay(3000).animate({marginTop: "+=300px"});

^ *\$$•img#.+•$\.delay$[0-9]+$\.animate${marginTop: •\+=300px•}$; *$

A div selector has been assigned to a variable. Fly the div in from the left 600 pixels, with a slow delay. Use the first method you learned, not the margin method. Make up the variable name.

divToMove.delay("slow").animate({left: "600px"});

^ *.+\.delay$•slow•$\.animate${left: •600px•}$; *$

Move a div after a delay. The number of seconds to delay and the number of pixels to move have been assigned to variables. The move is down from the top of the screen. Use the margin method. Make up the div id and the variable names.

$("div#main").delay(secs).animate({marginTop:
"+=" + pixels + "px"});

^ *\$$•div#.+•$\.delay$.+$\.animate${marginTop: •\+=• \+ .+ \+ •px•}$; *$