Below is the jQuery code snippet that I am using:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#button1").click(function() {
alert(1)
var div = $("div");
div.animate({
left: '100px'
}, "slow");
div.animate({
fontSize: '3em'
}, "slow");
});
$("button").click(function() {
alert(3)
var div = $("div");
div.animate({
left: '50px'
}, "slow");
div.animate({
fontSize: '7em'
}, "slow");
});
});
</script>
</head>
<body>
<button id="button2">Start Animation2</button>
<button id="button1">Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>When I execute the above code, the Start Animation2 button works only for the first time and has no effect on subsequent clicks. However,
the Start Animation
button functions correctly on every click. It seems that the issue lies in the event listener for the
Start Animation2
button not being triggered multiple times. Why does this happen?