使用jQuery從中間到頂部對多個元素進行動畫處理

Question

我正在嘗試在幾秒鍾后將div（實際上它們是AlwaysVisibleControls ）從中心屏幕移動到頁面頂部。

這就是我所擁有的：

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

這行得通，但是問題在於可以有多個通知（ $('.PanelNotificationBox').size()>1 ）。 然后它們將在動畫之后彼此重疊。

問：如何為元素設置動畫，以便第一個元素位於頂部，下一個元素相對於其他元素保持位置？

編輯 ：在我將notification-div添加到container-div並嘗試對其進行動畫處理之后，它根本不會動畫。 這是生成的HTML / CSS（注意：外部div是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-文件：

.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

我建議將所有消息放置在一個div中，並將此div設置在頁面頂部的abosule位置，並為保存所有消息的該div設置動畫。 我認為您甚至可以將所有元素都放在該div中，它們由他自己彼此安排。

<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>

和你的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

@Yoshi和@Aristos的方法不符合打破AlwaysVisibleControls js功能的AlwaysVisibleControls 。 還是要謝謝你 ：）

我以這個解決方案結束了，什么工作正常（省去了計時器部分）：

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