Scribd
Upload
2 views2 pages

9

This document is an HTML page that demonstrates a jQuery script example. It includes functionality to append content to a paragraph and a list, as well as animate a box element. The animation changes the box's size and color upon completion.

Uploaded by

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

9

This document is an HTML page that demonstrates a jQuery script example. It includes functionality to append content to a paragraph and a list, as well as animate a box element. The animation changes the box's size and color upon completion.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>

<title>jQuery Script Example</title>


<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
margin-bottom: 20px;
}
.animate-box {
width: 100px;
height: 100px;
background-color: lightblue;
margin-top: 20px;
}
.highlight {
background-color: pink !important;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
<p id="paragraph">This is a paragraph.</p>
<button id="append-to-paragraph">Append to Paragraph</button>
</div>

<div class="container">
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="append-to-list">Append to List</button>
</div>

<div class="container">
<button id="animate-box">Animate Box</button>
<div class="animate-box"></div>
</div>

<script>
$(document).ready(function () {
// a. Append content at the end of existing paragraph and list
$('#append-to-paragraph').click(function () {
$('#paragraph').append(' Appended content!');
});

$('#append-to-list').click(function () {
$('#list').append('<li>Appended item</li>');
});

// b. Change the state of the element with CSS style using animate()
$('#animate-box').click(function () {
$('.animate-box').animate({
width: '200px',
height: '200px',
marginLeft: '50px'
}, 1000, function () {
// c. Change the color of the div when the animation is
complete
$(this).addClass('highlight');
});
});
});
</script>
</body>
</html>

You might also like