Scribd
Upload
34 views3 pages

Lecture 117 - Animating Content - Animatingcontentdothtml

This document contains HTML and jQuery code to animate a green circular div element with an id of "circle". When the circle is clicked, jQuery animates it over 800 milliseconds to change its width, height, border radius, and margins, transforming it into a larger oval shape offset from the top and left of the page. A red square div is also included below for demonstration purposes.

Uploaded by

srikantheswar
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
34 views3 pages

Lecture 117 - Animating Content - Animatingcontentdothtml

This document contains HTML and jQuery code to animate a green circular div element with an id of "circle". When the circle is clicked, jQuery animates it over 800 milliseconds to change its width, height, border radius, and margins, transforming it into a larger oval shape offset from the top and left of the page. A red square div is also included below for demonstration purposes.

Uploaded by

srikantheswar
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/ 3

Animating Content:

animatingcontent.html
!
!
<!doctype html>

<html>

<head>

<title>Learning jQuery</title>

<meta charset="utf-8" />

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<script type="text/javascript" src="jquery.min.js"></script>

<style>

#circle {

width:200px;

height:200px;

background-color:green;

border-radius:100px;

.square {
width:300px;

height:300px;

background-color:red;

margin-top:10px;

</style>

</head>

<body>

<div id="circle"></div>

<script>

$("#circle").click(function() {

$(this).animate({

width:"300px",

height:"300px",

borderRadius:"150px",

marginLeft:"100px",

marginTop:"100px"

},800);

});

</script>

</body>

</html>

You might also like