Murach's javascript and Jquery 4th edition (ch9 animation) I need help with this assignment, please. thanksModify a carousel to use animationIn this exercise, you’ll modify a carousel application so that when an image in the carousel is clicked, an enlarged image is displayed using animation.1. Open the application in this folder:carouselThen, run the application and notice that an enlarged image of the first book in the carousel is displayed.2. Review the HTML for the application, and notice that it contains an img element with an id of “image” following the heading. Also notice that the href attributes of the <a>elements in the carousel are set to the URL of the enlarged image to be displayed when the associated carousel image is clicked.3. Code an event handler for the click event of the <a> elements in the list. This event handler should start by getting the URL for the image to be displayed. Then, it should assign this URL to the enlarged image.4. Add animation to the click event handler so the opacity of the current image is set to 0 and 205 is subtracted from the left margin of the image over a period of 1 second. Use a callback function to reverse this animation. This function should also contain the statement that sets the URL for the enlarged image. The effect will be for the current image to fade out as it slides to the left, and then for the new image to fade in as it slides to the right.Here is HTML file<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Carousel Animation</title> <link rel="stylesheet" href="carousel.css"> </head><body> <main> <h1>View our Books</h1> <img id="image" src="images/book1.jpg" alt="HTML5 and CSS3"> <div id="carousel"> <div id="left_button" class="button_panel"><img src="images/left.jpg" alt=""></div> <divid="display_panel"> <ul id="image_list"> <li><a href="images/book1.jpg"><img src="images/book1.jpg" alt="HTML5 and CSS3"></a></li> <li><a href="images/book2.jpg"><img src="images/book2.jpg" alt="Java Servlets and JSP"></a></li> <li><a href="images/book3.jpg"><img src="images/book3.jpg" alt="JavaScript and jQuery"></a></li> <li><a href="images/book4.jpg"><img src="images/book4.jpg" alt="Android programming"></a></li> <li><a href="images/book5.jpg"><img src="images/book5.jpg" alt="MySQL"></a></li> <li><a href="images/book6.jpg"><img src="images/book6.jpg" alt="PHP and MySQL"></a></li> <li><a href="images/book7.jpg"><img src="images/book7.jpg" alt="Oracle SQL and PL/SQL"></a></li> <li><a href="images/book8.jpg"><img src="images/book8.jpg" alt="ASP.NET 4.6 web programming with C# 2015"></a></li> <li><a href="images/book9.jpg"><img src="images/book9.jpg" alt="SQL Server"></a></li> </ul> </div> <div id="right_button" class="button_panel"><img src="images/right.jpg" alt=""></div> </div> </main> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="carousel.js"></script></body></html> **Title: Murach's Python Programming****Edition: 2nd Edition****Target Audience: Beginners to Professionals**This book, *Murach's Python Programming*, is designed to cater to both beginners and experienced programmers looking to advance their skills in Python. The cover features the book’s title prominently, set against a blue background, emphasizing its focus on the Python programming language.**Key Features:**1. **Quick Start to Python**: This section covers the essentials needed to begin programming in Python. It includes fundamental syntax and concepts, ideal for those new to programming or transitioning from another language.2. **Building Blocks of Python Programming**: Dedicated chapters that explore data types, control structures, functions, and error handling, providing a solid foundation in Python.3. **Advanced Python Features**: For those looking to deepen their understanding, this part of the book delves into more complex topics such as object-oriented programming, file handling, and database interaction.4. **Real-world Applications**: The book provides practical examples and projects that demonstrate the application of Python in real-world scenarios, reinforcing learning through hands-on practice.5. **Updated for Latest Python Version**: The second edition includes updates and features introduced in the latest version of Python, ensuring learners are up-to-date with the most current practices.**Learning Outcome:**Readers will be equipped with the knowledge to develop Python applications from the ground up, transitioning from a novice to an advanced level. This resource aims to both educate and inspire future proficiency in Python programming.**Author: Joel Murach****Publisher: Mike Murach & Associates**This book serves as a comprehensive guide to mastering Python, tailored for a range of learning stages from beginner to pro. **Book Title:** Murach's JavaScript and jQuery**Authors:** Mary Delamater, Zak Ruvalcaba**Publisher:** Mike Murach & Associates, Inc.**Description:** This book serves as a comprehensive guide to mastering JavaScript and jQuery, designed to help both beginners and experienced developers. The cover features a bold blue background with the title prominently displayed in yellow and white text.**Special Highlights:**1. **JavaScript Skills:** - Learn how to code, test, and debug JavaScript applications. - Understand the basic structures and best practices for writing efficient JavaScript.2. **jQuery Basics and Beyond:** - Discover how to use jQuery to simplify JavaScript development. - The book covers both fundamental and advanced jQuery techniques.3. **DOM Manipulation:** - Understand how to dynamically work with the DOM to create interactive web pages.4. **Event Handling:** - Learn how to handle events in JavaScript and jQuery to improve user interactions.5. **AJAX and APIs:** - Find out how to fetch data using AJAX and how to integrate with web APIs.This book is an essential resource for those aiming to build dynamic and responsive web applications, providing practical knowledge with real-world examples and exercises.

Please find on carousel image click function body in bold. using .animate() method of jquery to…

I need help with this assignment, please. thanks Modify a carousel to use animation In this exercise, you’ll modify a carousel application so that when an image in the carousel is clicked, an enlarged image is displayed using animation. 1. Open the application in this folder: carousel Then, run the application and notice that an enlarged image of the first book in the carousel is displayed. 2. Review the HTML for the application, and notice that it contains an img element with an id of “image” following the heading. Also notice that the href attributes of the elements in the carousel are set to the URL of the enlarged image to be displayed when the associated carousel image is clicked. 3. Code an event handler for the click event of the elements in the list. This event handler should start by getting the URL for the image to be displayed. Then, it should assign this URL to the enlarged image. 4. Add animation to the click event handler so the opacity of the current image is set to 0 and 205 is subtracted from the left margin of the image over a period of 1 second. Use a callback function to reverse this animation. This function should also contain the statement that sets the URL for the enlarged image. The effect will be for the current image to fade out as it slides to the left, and then for the new image to fade in as it slides to the right.

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

100%

Murach's javascript and Jquery 4th edition (ch9 animation)

I need help with this assignment, please. thanks

Modify a carousel to use animation
In this exercise, you’ll modify a carousel application so that when an image in the
carousel is clicked, an enlarged image is displayed using animation.
1. Open the application in this folder:
carousel
Then, run the application and notice that an enlarged image of the first book in the
carousel is displayed.
2. Review the HTML for the application, and notice that it contains an img element with an id of “image” following the heading. Also notice that the href attributes of the <a>elements in the carousel are set to the URL of the enlarged image to be displayed when the associated carousel image is clicked.
3. Code an event handler for the click event of the <a> elements in the list. This event handler should start by getting the URL for the image to be displayed. Then, it should assign this URL to the enlarged image.
4. Add animation to the click event handler so the opacity of the current image is set to 0
and 205 is subtracted from the left margin of the image over a period of 1 second. Use a
callback function to reverse this animation. This function should also contain the statement that sets the URL for the enlarged image. The effect will be for the current image to fade out as it slides to the left, and then for the new image to fade in as it slides to the right.

Here is HTML file

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Carousel Animation</title>

<link rel="stylesheet" href="carousel.css">

</head>

<body>

<main>

<h1>View our Books</h1>

<img id="image" src="images/book1.jpg" alt="HTML5 and CSS3">

<div id="carousel">

<div id="left_button" class="button_panel"><img src="images/left.jpg" alt=""></div>

<divid="display_panel">

<ul id="image_list">

<li><a href="images/book1.jpg"><img src="images/book1.jpg" alt="HTML5 and CSS3"></a></li>

<li><a href="images/book2.jpg"><img src="images/book2.jpg" alt="Java Servlets and JSP"></a></li>

<li><a href="images/book3.jpg"><img src="images/book3.jpg" alt="JavaScript and jQuery"></a></li>

<li><a href="images/book4.jpg"><img src="images/book4.jpg" alt="Android programming"></a></li>

<li><a href="images/book5.jpg"><img src="images/book5.jpg" alt="MySQL"></a></li>

<li><a href="images/book6.jpg"><img src="images/book6.jpg" alt="PHP and MySQL"></a></li>

<li><a href="images/book7.jpg"><img src="images/book7.jpg" alt="Oracle SQL and PL/SQL"></a></li>

<li><a href="images/book8.jpg"><img src="images/book8.jpg" alt="ASP.NET 4.6 web programming with C# 2015"></a></li>

<li><a href="images/book9.jpg"><img src="images/book9.jpg" alt="SQL Server"></a></li>

</ul>

</div>

<div id="right_button" class="button_panel"><img src="images/right.jpg" alt=""></div>

</div>

</main>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script src="carousel.js"></script>

</body>

</html>

**Title: Murach's Python Programming**

**Edition: 2nd Edition**

**Target Audience: Beginners to Professionals**

This book, *Murach's Python Programming*, is designed to cater to both beginners and experienced programmers looking to advance their skills in Python. The cover features the book’s title prominently, set against a blue background, emphasizing its focus on the Python programming language.

**Key Features:**

1. **Quick Start to Python**: This section covers the essentials needed to begin programming in Python. It includes fundamental syntax and concepts, ideal for those new to programming or transitioning from another language.

2. **Building Blocks of Python Programming**: Dedicated chapters that explore data types, control structures, functions, and error handling, providing a solid foundation in Python.

3. **Advanced Python Features**: For those looking to deepen their understanding, this part of the book delves into more complex topics such as object-oriented programming, file handling, and database interaction.

4. **Real-world Applications**: The book provides practical examples and projects that demonstrate the application of Python in real-world scenarios, reinforcing learning through hands-on practice.

5. **Updated for Latest Python Version**: The second edition includes updates and features introduced in the latest version of Python, ensuring learners are up-to-date with the most current practices.

**Learning Outcome:**

Readers will be equipped with the knowledge to develop Python applications from the ground up, transitioning from a novice to an advanced level. This resource aims to both educate and inspire future proficiency in Python programming.

**Author: Joel Murach**

**Publisher: Mike Murach & Associates**

This book serves as a comprehensive guide to mastering Python, tailored for a range of learning stages from beginner to pro.

**Book Title:** Murach's JavaScript and jQuery

**Authors:** Mary Delamater, Zak Ruvalcaba

**Publisher:** Mike Murach & Associates, Inc.

**Description:**
This book serves as a comprehensive guide to mastering JavaScript and jQuery, designed to help both beginners and experienced developers. The cover features a bold blue background with the title prominently displayed in yellow and white text.

**Special Highlights:**

1. **JavaScript Skills:**
- Learn how to code, test, and debug JavaScript applications.
- Understand the basic structures and best practices for writing efficient JavaScript.

2. **jQuery Basics and Beyond:**
- Discover how to use jQuery to simplify JavaScript development.
- The book covers both fundamental and advanced jQuery techniques.

3. **DOM Manipulation:**
- Understand how to dynamically work with the DOM to create interactive web pages.

4. **Event Handling:**
- Learn how to handle events in JavaScript and jQuery to improve user interactions.

5. **AJAX and APIs:**
- Find out how to fetch data using AJAX and how to integrate with web APIs.

This book is an essential resource for those aiming to build dynamic and responsive web applications, providing practical knowledge with real-world examples and exercises.

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.