1
<div id="animateMe">
Watch me be animated!
</div>
<!-- One button for each fading command -->
<input type="button" id="btnAnimate" value="Animate It">
<input type="button" id="btnAnimateBack" value="Animate It Back">
CSS Code
div#animateMe {
left: 0;
top: 0;
position: relative;
width: 300px;
height: 100px;
border: 1px solid black;
background-color: teal;
}
JavaScript Code
$('#btnAnimate').click(function() {
$('#animateMe').animate({
'left': '300px',
'top': '200px',
'border-width': '8px'
}, 1000);
});
$('#btnAnimateBack').click(function() {
$('#animateMe').animate({
'left': '0',
'top': '0',
'border-width': '1px'
}, 1000);
});
2