Simple HTML/JS/CSS code for animation effect

Posted: December 12, 2011 in CSS, Javascript, JQuery
Tags: , , , ,

<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js&#8221; language=”javascript”></script>
<script language=”javascript”>
$(document).ready(function() {
window.setTimeout(function() {$(‘#box’).removeClass(“box1”).addClass(“boxCls”);}, 5000);

});

</script>
<style type=”text/css”>
.boxCls {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 200px;
background-color: white;
border: 10px solid black;
}

.box1 {
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
background-color: yellow;
border: 2px solid red;
float:left;
}
</style>
</head>
<body>
<div id=”box” class=”box1″>Box</div>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s