Program
9. Develop jQuery script (with HTML/CSS) for:
a. Appends the content at the end of the existing paragraph and list.
b. Change the state of the element with CSS style using animate() method
c. Change the color of any div that is animated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Script</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
margin: 20px;
}
button {
background-color: rgb(39, 212, 39);
border: none;
color: aliceblue;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-radius: 2px;
padding-bottom: 5px;
}
p, ul {
margin: 10px 0;
}
.animated-div {
width: 100px;
height: 100px;
background-color: lightblue;
margin-top: 20px;
}
.highlight {
border: 2px solid rgb(5, 242, 96);
}
</style>
</head>
<body>
<div class="container">
<button id="appendContent">Append Content</button>
<button id="animateElement">Animate Element</button>
<p id="paragraph">This is a paragraph.</p>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div class="animated-div"></div>
</div>
<script src="script.js"></script>
<script>
$(document).ready(function () {
// a. Append content to paragraph and list
$('#appendContent').click(function () {
$('#paragraph').append(' Appended text.');
$('#list').append('<li>Appended item</li>');
});
// b. Animate element
$('#animateElement').click(function () {
$('.animated-div').animate(
{
width: '200px',
height: '200px',
},
1000,
function () {
// c. Change the color after animation
$(this).css('background-color', 'blueviolet').addClass('highlight');
}
);
});
});
</script>
</body>
</html>
Output:
Home Page :-
Append Content Output :-
Animated Element Output :-
Append Content Output :-
Animated Element Output :-