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功能的缺点。无论如何，谢谢你:)）

我用这个解决方案结束了什么工作正常（省略了计时器部分）：

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

使用jQuery从中间到顶部动画多个元素

2 个答案: