Animate multiple elemts from middle to top with jQuery

Question

i'm trying to move divs(actually they are AlwaysVisibleControls ) from center-screen to the top of the page after a few seconds.

This is what i have:

$(document).ready(function() {
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});

var ScrollTopTimeOuts = [];
function PageLoaded(sender, args) {
    $('.PanelNotificationBox').click(function () {
        $(this).fadeOut('slow', function () {
            $(this).remove();
        });
    });

    while (ScrollTopTimeOuts.length != 0) {
        clearTimeout(ScrollTopTimeOuts[ScrollTopTimeOuts.length - 1]);
        ScrollTopTimeOuts.length--;
    }
    ScrollTopTimeOuts[ScrollTopTimeOuts.length] = setTimeout(function () {
        $('.PanelNotificationBox').animate({ top: 0 }, 'slow');
    }, 3000);
}

This works, but the problem is that there can be more than one notification( $('.PanelNotificationBox').size()>1 ). Then they will overlap each other after the animation.

Q: How can i animate elements so that the first element will be on top and the next elements will keep their positions relative to the others?

Edit : After i added the notification-div(s) to a container-div and try to animate that, it won't be animated at all. This is the generated HTML/CSS(note: the outer div is an UpdatePanel):

<div id="ctl00_UpdNotifier"         
    <div style="top: 0px;" id="ctl00_Notifier1_PnlNotification" class="NotificationContainer">
        <div style="left: 292px; top: 398px; display: none; visibility: visible; position: absolute; cursor: pointer; opacity: 1;" id="ctl00_Notifier1_InfoMsg2" class="PanelNotificationBox PanelInfo AutoHide" title="click to close notification">
            <span>Test-Notification(Info)</span>
        </div>
        <div style="left: 292px; top: 463px; visibility: visible; position: absolute; cursor: pointer; opacity: 1;" id="ctl00_Notifier1_ErrorMsg1" class="PanelNotificationBox PanelError" title="click to close notification">
            <span>Test-Notification(RMA-Error)</span>
        </div>
    </div>
</div>

CSS-File:

.PanelNotificationBox 
{
    visibility:hidden;
    z-index:9999;
    width: 50%;
    font-weight: bold;
    font-size:small;
    border: 1px solid;
    margin: 10px auto;
    padding: 20px 20px 20px 60px;
    background-repeat: no-repeat;
    background-position: 8px center;
    box-shadow: 2px 2px 3px #3A4F63;
    border-radius: 4px;
}


.PanelInfo {
    color:Black;
    background-color: InfoBackground;
    background-image: url('../images/info-icon.png');
}

.PanelError {
    color:White;
    background-color: red;
    background-image: url('../images/error-icon.png');
}

Answer 1

I suggest to place all your messages in a div, and set this div on abosule position on the top of the page and animate this div that holds all the messages. I think that you can even just place all your element in this div, and they arrange by him self the one afther the other.

<style type="text/css">
.Containerv {
    position:absolute;
    left:10px;
    top:10px;
    width:230px;    
}   
</style>

<div id="ContainerID" class="Container">
    <div>First element</div>
    <div>Second element</div>   
    <div>.... next elements</div>
</div>

and your javascript

$(document).ready(function() {
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
});

var ScrollTopTimeOuts = [];
function PageLoaded(sender, args) 
{
    // keep this to indivitual close messages
    $('.PanelNotificationBox').click(function () {
        $(this).fadeOut('slow', function () {
            $(this).remove();
        });
    });

   clearTimeout(ScrollTopTimeOuts);

   ScrollTopTimeOuts = setTimeout(function () {
       $('#ContainerID').animate({ top: 0 }, 'slow');
   }, 3000);
}

Answer 2

The approaches from @Yoshi and @Aristos had the disadvatage of breaking the AlwaysVisibleControls js-functionality. Thank you anyway :)

I ended with this solution what is working fine(leaving out the timer part):

var first=$('.PanelNotificationBox:first');
$('.PanelNotificationBox').each(function (index) {
    $(this).animate({ top: '-=' + first.offset().top }, 'slow');
});