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.

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Concept explainers

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:

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.

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.

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 2 steps

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

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