<!DOCTYPE html>
<html>
<head>
<style>
#ss {
top:120px;
position : relative;
}
#block {
background-color: #bada55;
width: 100px;
border: 1px solid green;
}
p {
background-color: #FFEFD5;
width: 300px;
height: 100px;
border: 1px solid green;
position : absolute;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.color-2.1.2.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
</head>
<body>
<p>Click ME</p>
<div id='ss'>
<button id="go">Simple</button>
<button id="sat">Desaturate</button>
<div id="block">Hello!</div>
</div>
<script>
jQuery("#go").click(function(){
jQuery("#block").animate({
backgroundColor: "#FFFF00"
}, 1500 );
});
jQuery("#sat").click(function(){
jQuery("#block").animate({
backgroundColor: jQuery.Color('#7FFF00')
}, 1500 );
});
</script>
<script>
jQuery("#go").click(function(){
jQuery("#block").animate({
backgroundColor: "#FFFF00"
}, 1500 );
});
jQuery("#sat").click(function(){
jQuery("#block").animate({
backgroundColor: jQuery.Color('#7FFF00')
}, 1500 );
});
var cl=true;
$( 'p' ).click(
function(e) {
if(cl){
$(this).animate({ top: '-=10px' ,
left:'100px',
width:'300px',
backgroundColor:"#54FF9F"
}, 3000, 'easeInElastic', function () {});
$('#ss').animate({top: '-=10px' ,
left:'100px',
width:'200px'},3000,'easeInElastic' ).queue( 'false');
//$('p').unbind('click');//
cl=false;
} else {
$(this).animate({ top: '+=10px' ,
left:'-=100px',
width:'300px',
backgroundColor:"#FFFFFF"
}, 3000, 'easeInElastic', function () {});
$('#ss').animate({top: '+=10px' ,
left:'-=100px',
width:'200px'},3000,'easeInElastic' ).queue( 'false');
cl=true;
}
}
);
</script>
</body>
</html>