jquery with animation
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<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>
<body>
<div class="animation">
jquery animation<br />
</div>
<input id="animation" type="button" value="Click To Animate" />
</body></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<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>
<body>
<div class="animation">
jquery animation<br />
</div>
<input id="animation" type="button" value="Click To Animate" />
</body></div>
No comments:
Post a Comment