Question

Create a page with different elements and animations. Using different events, manipulate the classes and fade...

Create a page with different elements and animations. Using different events, manipulate the classes and fade elements as well as animation and slide in/out with jQuery.

Create an accordion (see jquery-04 / accordion)

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

Below is the html Solution with output screenshot

Code : index.html

<!DOCTYPE html>
<html>
    <head>
        <!-- include jquery cdn file -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <!-- giving a title to our page -->
        <title>jquery Demo</title>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <!-- inserting all the script here in the script tag -->
        <script>
            $(document).ready(function () {
                $("#btn1").click(function () {
                    $("#box").animate({ height: "300px" });
                });
                $("#btn2").click(function () {
                    $("#box").animate({ height: "100px" });
                });

                $("#flip").click(function () {
                    $("#panel").slideToggle("slow");
                });

                $("#fadein").click(function () {
                    $("#div1").fadeIn();
                    $("#div2").fadeIn("slow");
                    $("#div3").fadeIn(3000);
                });

                $(function () {
                    $("#accordion").accordion();
                });
            });
        </script>

        <!-- using css here in style tag -->
        <style>
            #panel,
            #flip {
                padding: 5px;
                text-align: center;
                background-color: #e5eecc;
                border: solid 1px #c3c3c3;
            }

            #panel {
                padding: 50px;
                display: none;
            }
        </style>
    </head>
    <body>
        <!-- animate section -->
        <p>Demonstrate jquery animate function</p>
        <button id="btn1">Animate height</button>
        <button id="btn2">Reset height</button>

        <div id="box" style="background: #98bf21; height: 100px; width: 100px; margin: 6px;"></div>

        <!-- toogle section -->
        <p>Demonstrate jquery slidetoggle function</p>

        <div id="flip">Click to slide the panel down or up</div>
        <div id="panel">Hello world!</div>

        <!-- accordion section -->
        <p>Demonstrate Accordion using jquery</p>
        <div id="accordion">
          <h3>Section 1</h3>
          <div>
            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
          </div>
          <h3>Section 2</h3>
          <div>
            <p>
            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
            purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
            velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
            suscipit faucibus urna.
            </p>
          </div>
          <h3>Section 3</h3>
          <div>
            <p>
            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
            Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
            ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
            lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
            </p>
            <ul>
              <li>List item one</li>
              <li>List item two</li>
              <li>List item three</li>
            </ul>
          </div>
          <h3>Section 4</h3>
          <div>
            <p>
            Cras dictum. Pellentesque habitant morbi tristique senectus et netus
            et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
            faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
            mauris vel est.
            </p>
            <p>
            Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
            inceptos himenaeos.
            </p>
          </div>
        </div>

        <!-- fade section -->
        <div id="fade-div">
            <p>Demonstrate fadeIn() with different parameters.</p>
            <button id="fadein">Click to fade in boxes</button><br />
            <br />

            <div id="div1" style="width: 80px; height: 80px; display: none; background-color: red;"></div>
            <br />
            <div id="div2" style="width: 80px; height: 80px; display: none; background-color: green;"></div>
            <br />
            <div id="div3" style="width: 80px; height: 80px; display: none; background-color: blue;"></div>
        </div>

    </body>
</html>

Output :

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
For this assignment, create an html page that has a login form. The form should have...
For this assignment, create an html page that has a login form. The form should have 3 input elements -- 1. This should have a type text for the user to enter UserName 2. This should have a type password (like text except cannot see the text that is typed in), for the user to enter password. 3. Submit button (type submit, as we did in class on 2/6). The form method should be set to POST and the action...
Assignment Statement Use the skeleton file starter code (below) to create the following classes using inheritance:...
Assignment Statement Use the skeleton file starter code (below) to create the following classes using inheritance: ⦁   A base class called Pet ⦁   A mix-in class called Jumper ⦁   A Dog class and a Cat class that each inherit from Pet and jumper ⦁   Two classes that inherit from Dog: BigDog and SmallDog ⦁   One classes that inherit from Cat: HouseCat The general skeleton of the Pet, Dog, and BigDog classes will be given to you (see below, "Skeleton", but...
Using Java Write only “stubs” for methods in the Figure, Rectangle, and Triangle classes: Consider a...
Using Java Write only “stubs” for methods in the Figure, Rectangle, and Triangle classes: Consider a graphics system that has classes for various figures — say, rectangles, boxes, triangles, circles, and so on. For example, a rectangle might have data members’ height, width, and either a center point or upper-left corner point, while a box and circle might have only a center point (or upper-right corner point) and an edge length or radius, respectively. In a well-designed system, these would...
JAVA PROGRAMMING: Write a program called TimeSymbolTables that creates three symbol tables, each of a different...
JAVA PROGRAMMING: Write a program called TimeSymbolTables that creates three symbol tables, each of a different implementation. Each symbol table will contain as a key a word read from a text file and as a value the number of times that word occurs in the text file. Have the program fill the first symbol table with these counts, keeping track of how long that takes using a Stopwatch object. It then does the same thing with the second symbol table....
Please linked both files. For this assignment you need to create a ToDo list using Javascript,...
Please linked both files. For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link...
Using Python, students will use variables, input, and printing to create a Mad Lib. The program...
Using Python, students will use variables, input, and printing to create a Mad Lib. The program will print out the title of the Mad Libs story, as well as a short explanation of game play: The program should then prompt the user to enter in nouns, verbs, adjectives, proper nouns, and adverbs: Enter a proper noun: Enter a place: Enter another place: Enter an adverb: Enter a noun: Enter an adjective: Enter an adverb: Enter a verb: Enter a place:...
--USING C# ONLY-- You will create your own on-line shopping store in the console application. You...
--USING C# ONLY-- You will create your own on-line shopping store in the console application. You can choose different products to sell in your store (at least 8 products). You will create an product inventory text file. The program will display two options at the beginning of the program, Customer and Manager. Customer: If this is a new customer, the program will allow the customer to register with their information and assign a unique ID number to the new customer....
CAN YOU PLEASE WRITE THIS CODE IN A DIFFERENT WAY 'EASIER AND BETTER' QUESTION Using C++...
CAN YOU PLEASE WRITE THIS CODE IN A DIFFERENT WAY 'EASIER AND BETTER' QUESTION Using C++ 11. Write a function that will merge the contents of two sorted (ascending order) arrays of type double values, storing the result in an array out- put parameter (still in ascending order). The function shouldn’t assume that both its input parameter arrays are the same length but can assume First array 04 Second array Result array that one array doesn’t contain two copies of...
Data-Set: “Car Companies –02.19.2019” –first page of which are Treasury Interest Rates Background: Musk tweeted…. Going...
Data-Set: “Car Companies –02.19.2019” –first page of which are Treasury Interest Rates Background: Musk tweeted…. Going Private… Funds Assured!!! Well, maybe not. Musk gets sued. Tesla gets sued. Stock price goes up, goes down, goes everywhere… Musk steps down as Chairman and both Musk and Tesla settle their lawsuits with the SEC. Tesla still has Musk as CEO – but now under control. Well, that was until 02.26.2019 when he tweeted again, and violated his SEC restraining order. Out of...
In MPLAB XIDE create a program using assembly to produce three different LED combinations using 4...
In MPLAB XIDE create a program using assembly to produce three different LED combinations using 4 LED lights and 4 switches that correspond to each LED. There will be 4 inputs and 4 outputs. The program includes three levels (the three LED combinations). Each level will be a random combination (i.e. red, blue, green, orange). The player will then repeat the combinations as accurately as possible. If the player repeats the led sequence correctly, the code will branch to the...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT