Chaining transition in javascript animation

Question

I have a list that looks like this :

Now I am having a requirement to animate the box which is clicked to the center of the screen, wait for .5 second and then move to the top as heading.

I have been trying out different option in velocity.js but unable to figure out how to do this.

function animateobject(objName, obj) {
debugger;
obj = $(obj);
var p = obj.offset();
var element = $('#' + objName);
element.html(obj.closest('.connectPan2List').find('p').html());
element.css('top', p.top);
element.css('left', p.left);
element.velocity({ top:'50%', left:'50%' }, { duration: 500, easing: "linear" })
        .velocity({ top: '10px' }, {
            duration: 500, easing: "linear", complete: function () {
                alert('');
            }});

}

Here I have been trying to transfer the element to the center of the screen and then move up to the top, but it seems I am unable to get it properly. Can anyone help me on this please.