Use jQuery to create a launcher with the properties below. The data files include all the necessary HTML and CSS code; you do not need to modify the HTML or CSS. Add the necessary jQuery code to make the launcher work.   Your launcher should have the following properties: The launcher starts hidden from the page. When the user clicks the launcher button (bar at top of page), three things happen: The launchpad slides down. It takes 1/2 second to slide down. The "instructions" paragraph fades in. It takes 1/2 second to fade in. The red box that you are going to animate ("box") appears.   Each of the three icons that appears on the launchpad is a button ("one", "two", "three"). When the user puts the mouse over the button, it animates the red box. When the user moves the mouse out, the box animates back to its original size and position. The three animations: One: The box moves 300px to the right, and grows in width and height by 150px. Two: The box shrinks by 125px in width and height. Three: The box increases in height by 350px. Then the box increases in width by 450px. Note that these two things happen in sequence, not at the same time.   If the launcher is open, clicking the launcher button will close it.

EBK JAVA PROGRAMMING
9th Edition
ISBN:9781337671385
Author:FARRELL
Publisher:FARRELL
Chapter15: Using Javafx And Scene Builder
Section: Chapter Questions
Problem 14RQ
icon
Related questions
Question

Use jQuery to create a launcher with the properties below.

The data files include all the necessary HTML and CSS code; you do not need to modify the HTML or CSS. Add the necessary jQuery code to make the launcher work.

 

Your launcher should have the following properties:

  1. The launcher starts hidden from the page. When the user clicks the launcher button (bar at top of page), three things happen:

    1. The launchpad slides down. It takes 1/2 second to slide down.
    2. The "instructions" paragraph fades in. It takes 1/2 second to fade in.
    3. The red box that you are going to animate ("box") appears.

 

  1. Each of the three icons that appears on the launchpad is a button ("one", "two", "three"). When the user puts the mouse over the button, it animates the red box. When the user moves the mouse out, the box animates back to its original size and position.

The three animations:

One: The box moves 300px to the right, and grows in width and height by 150px.

Two: The box shrinks by 125px in width and height.

Three: The box increases in height by 350px. Then the box increases in width by 450px. Note that these two things happen in sequence, not at the same time.

 

  1. If the launcher is open, clicking the launcher button will close it.
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 2 steps

Blurred answer
Knowledge Booster
JQuery and Javascript
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
EBK JAVA PROGRAMMING
EBK JAVA PROGRAMMING
Computer Science
ISBN:
9781337671385
Author:
FARRELL
Publisher:
CENGAGE LEARNING - CONSIGNMENT
Np Ms Office 365/Excel 2016 I Ntermed
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:
9781337508841
Author:
Carey
Publisher:
Cengage