<style>
.animation{
width : 300px;
height : 300px;
border : #000 thin solid;
background-color:#903;
border-radius : 50px;
position:relative;
}
input{
background-color:#FF0;
margin : 20px;
padding : 20px;
border : #999 thin solid;
border-radius : 50px;
}
</style>
<script src="../jquery-classes/jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
var anim = $('.animation');
$('#animation').click(function(){
anim.animate({
left:'600px',
opacity:'0.7',
});
anim.animate({
top:'300px',
opacity:'0.5',
});
anim.animate({
left:'0px',
opacity:'0.1',
});
anim.animate({
top:'0px',
opacity:'1',
});
});
});
</script>
</head>
<body>
<div class="animation">
<p>jquery animation</p>
</div>
<input type="button" value="Click To Animate" id="animation" />
</body>
.animation{
width : 300px;
height : 300px;
border : #000 thin solid;
background-color:#903;
border-radius : 50px;
position:relative;
}
input{
background-color:#FF0;
margin : 20px;
padding : 20px;
border : #999 thin solid;
border-radius : 50px;
}
</style>
<script src="../jquery-classes/jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
var anim = $('.animation');
$('#animation').click(function(){
anim.animate({
left:'600px',
opacity:'0.7',
});
anim.animate({
top:'300px',
opacity:'0.5',
});
anim.animate({
left:'0px',
opacity:'0.1',
});
anim.animate({
top:'0px',
opacity:'1',
});
});
});
</script>
</head>
<body>
<div class="animation">
<p>jquery animation</p>
</div>
<input type="button" value="Click To Animate" id="animation" />
</body>
No comments:
Post a Comment