<html>
<head>
<meta charset="utf-8">
<style>
#divAnim1
{
background:red;
width:20px;
height:20px;
margin-left:100px;
margin-top:100px;
}
#divAnim2
{
background:red;
width:200px;
height:200px;
margin-left:200px;
margin-top:20px;
position:relative;
}
</style>
<1--jquery.min.js included from url -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function() {
//Click event listener for btn1
$("#btn1").click(function(){
if($("#divAnim1").width()<=250)
{
$("#divAnim1").animate({
height:'+=250px',
width:'+=250px'
},1000);
}
else
{
$("#divAnim1").animate({
height:'-=250px',
width:'-=250px'
; },1000);
}
}); $("#btn2").click(function(){
$("#divAnim2").animate({
height:'toggle',
width:'toggle'
},1000);
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="Click Me" />
<input type="button" id="btn2" value="Click Me Again" />
<div id="divAnim1" border="1px">
<div id="divAnim2" border="1px">
</div>
</body>
</html>
No comments:
Post a Comment