jQuery DOM Manipulation

You should create a Javascript file called jQueryTest.js locally to the HTML file jQueryTest.html - all code should be in this file. Do not edit this HTML document.

Task 1

• On page load, hide #button2, #button3, and #cat
• Make #button1 when clicked display #button2
• Make #button2 when clicked display #button3
• Make #button3 when clicked display #cat
• Make #button4 when clicked hide #button2, #button3, and #cat

Task 2

• Add the attribute disabled to buttons when they have been clicked.
• When #button4 is clicked, ensure all buttons are re-enabled again.

Task 3

• When buttons appear, make them fade in instead of instantly appear.
• When #cat appears, make it slide down instead of instantly appear.
• When #button4 is clicked, make #cat slide up, and #button2/#button3 fade out.

Task 4

• When #cat slides down, make the slide down animate slower.
• When #button4 is clicked, make #cat slide up first, only once hidden, then fade out #button3, and again once hidden, only then fade out #button2.

Task 5

• When the image of the cat is clicked, change the image to another cat - do NOT set an ID to the image.

Task 6

• Create an array of 5 cat image URL's.
• When the cat is clicked, slide up the cat, and slide down a random new image of a cat from your array - this can be called unlimited times.

Task 7

• 5 seconds after #button3 is clicked, dynamically (in jQuery) add a new button after #button4 with the id #button5 with the value "I prefer dogs"
• When #button5 is clicked, slide up the cat image and slide down a random dog image.