$(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); }