function bounce(t) {
if (t < (1 / 2.75)) {
return 7.5625 * t * t;
}
if (t < (2 / 2.75)) {
return 7.5625 * (t-= (1.5 / 2.75)) * t + 0.75;
}
if (t < (2.5 / 2.75)) {
return 7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375;
}
return 7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375;
}
$('#nw').animate({
"background-color": '#ff00ff',
left: 500,
top: 100,
easing: bounce,
duration: 1000
});
$('#ne').animate({
"background-color": '#0000ff',
right: 500,
top: 100,
easing: bounce,
duration: 1000
});
$('#sw').animate({
"background-color": '#00ff00',
left: 500,
bottom: 100,
easing: bounce,
duration: 1000
});
$('#se').animate({
'background-color': '#00ccff',
right: 500,
bottom: 100,
easing: bounce,
duration: 1000,
after: function () {
$('#ender').animate({
opacity: 1,
duration: 1000,
after: function () {
function f1() {
$('#ender').animate({
duration: 1000,
color: '#ff0000',
after: f2
});
}
function f2() {
$('#ender').animate({
duration: 1000,
color: '#00ff00',
after: f1
});
}
f1();
}
});
}
});
<div id="anim">
<p id="ender">Ender</p>
<div id="nw"></div>
<div id="ne"></div>
<div id="sw"></div>
<div id="se"></div>
</div>
html,body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
p {
margin: 0;
font: 100 50px 'helvetica neue', helvetica, arial;
opacity: 0;
color: #333;
filter: alpha(opacity=0);
position: relative;
top: 10px;
}
#anim {
text-align: center;
position: relative;
width: 750px;
margin: 0 auto;
top: 100px;
height: 100px;
}
#anim div {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
}
#nw {
left: 0;
top: 0;
background-color: green;
}
#ne {
top: 0;
right: 0;
background-color: blue;
}
#sw {
bottom: 0;
left: 0;
background-color: orange;
}
#se {
bottom: 0;
right: 0;
background-color: red;
}
External resources loaded into this fiddle: