<! DOCTYPE html>
<script src= "/jquery/jquery-1.11.1.min.js" >
</script>
<script>
$ (document). Ready (function () {
$ (". Start"). Click (function () {
$ ("div"). Animate ({
Left: ' 500px ',
Opacity: ' 0.5 ',
Height: ' 300px ',
Width: ' 50px '
}, "Slow", function () {
Alert ("Animate animation Effect");
});
});
$ (". Reset"). Click (function () {
if (Confirm ("want to revert to the original?") ")){
$ ("div"). Animate ({
Background: ' #98bf21 ',
Height: ' 100px ',
Width: ' 100px ',
Position: ' absolute '});
}
});
});
</script>
<body>
<button class= "Start" > Start animation </button>
<button class= "reset" > Resume animation </button>
<p> by default, the location of all HTML elements is static and cannot be moved. To manipulate the location, remember to first set the element's CSS position property to relative, fixed, or absolute. </p>
<div style= "background: #98bf21; height:100px;width:100px;position:absolute;" >
</div>
</body>
The animate animation of JS