Scribd
Upload
4 views4 pages

WTL Assignment 10

The document outlines an assignment focused on writing jQuery code to animate a div element upon a button click. It explains the purpose and advantages of using jQuery, including its ease of use and ability to manipulate HTML/CSS and DOM elements. The provided code demonstrates a simple implementation of jQuery to create an animation effect, enhancing the interactivity of web pages.

Uploaded by

kirannandi01234
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views4 pages

WTL Assignment 10

The document outlines an assignment focused on writing jQuery code to animate a div element upon a button click. It explains the purpose and advantages of using jQuery, including its ease of use and ability to manipulate HTML/CSS and DOM elements. The provided code demonstrates a simple implementation of jQuery to create an animation effect, enhancing the interactivity of web pages.

Uploaded by

kirannandi01234
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Name: Harsh Singh Parihar

Class: CC-1 Batch: B

Roll no:2223337

Assignment No.10

Aim: Write a JQuery code to give animation to div on click of button.

Objective: To learn about concept and implementation of Jquery

Theory:

What is jQuery? :

JQuery is an open-source JavaScript library that simplifies the interactions between an


HTML/CSS document, or more precisely the Document Object Model (DOM), and
javaElaborating the terms, it simplifies HTML document traversing and manipulation,
browserevent handling, DOM animations, Ajax interactions, and cross-browser JavaScript
development.

Why to use jQuery?

Some of the key points that support the answer for why to use jQuery It helps us to manipulate
HTML and CSS It helps us to manipulate DOM (Document Object Model) elementsProvides
event methods to trigger and respond to an events on a html page such as mouse Click, keypress
etc.Implements AJAX calls. Using jQuery (JavaScript library) on HTML page: There are several
ways to start using it on your website. Use the Google-hosted/Microsoft-hosted content delivery
network (CDN) to include a version Or Download it from official website jQuery.com and host it
on your server or local filesystem.

Advantages:
Wide range of plug-ins that allows developers to create plug-ins on top of the JavaScript
library.Large development community.It is a lot easier to use compared to standard javascript
and other javascript libraries.It lets users develop Ajax templates with ease. Ajax enables a
sleeker interface where actionscan be performed on pages without requiring the entire page to be
reloaded.Being Light weight and powerful chaining capabilities makes it stronger.
Disadvantages:
While jQuery has an impressive library in terms of quantity, depending on how much
customization you require on your website. The functionality may be limited thus using
rawJavaScript may be inevitable in some cases. The JQuery javascript file is required to run the
commands, while the size of this file is relativelysmall (25-100KB depending on the server). It is
still a strain on the client computer and maybeyour web server as well if you intend to host the
script on your own web server.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation on Button Click</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#animatedDiv {
width: 100px;
height: 100px;
background-color: red;
margin: 20px;
}
</style>
</head>
<body>

<button id="animateButton">Animate Div</button>


<div id="animatedDiv"></div>

<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("#animatedDiv").animate({
width: "300px",
height: "300px",
opacity: 0.5
}, 1000); // Duration of 1 second
});
});
</script>

</body>
</html>

Output:
Conclusion:
This jQuery code adds a smooth animation to a div, toggling its width, height, and opacity over a
set duration when the button is clicked. This enhances the visual appeal and interactivity of your
page, making elements appear and disappear with smooth transitions.

You might also like