$(document).ready(function() {
//define variables
var callmeanything1 = $("#box1");
var callmeanything2 = $("#box2");
//calling the animate function
animate(callmeanything1, 300, 100, 0.6, 3000, function() {
});
//calling the animate function
animate(callmeanything2, 480, 100, 0.1, 3000, function() {
alert("animation finished");
});
});
//custom animate function
function animate(el, leftVal, topVal, fadeVal, speed, callback) {
el.animate({
left: leftVal,
top: topVal,
opacity: fadeVal
}, {
duration: speed,
queue: false,
easing: "swing",
complete: function() {
if (callback) {
callback();
}
}
});
}
<div id="box1">
<p>box1</p>
</div>
<div id="box2">
<p>box2</p>
</div>
#box1{
background-color: blue;
width:100px; height:100px;
position:relative;
}
#box2 {
background-color: red;
width:100px; height:100px;
position:relative;
}
p {
text-align:center;
vertical-align:middle;
color: rgb(90,90,90);
}