使用 jQuery 从中间到顶部为多个元素设置动画答案

【问题标题】：Animate multiple elemts from middle to top with jQuery使用 jQuery 从中间到顶部为多个元素设置动画
【发布时间】：2011-11-14 09:04:59
【问题描述】：

我正试图在几秒钟后将 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)。然后它们会在动画结束后相互重叠。

问：如何为元素设置动画，以便第一个元素位于顶部，而下一个元素将保持其相对于其他元素的位置？

编辑：在我将通知 div(s) 添加到容器 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');
}

【问题讨论】：

包装元素可能吗？我的意思是，您可以将所有通知放在一个包装元素中，然后只移动它。这样相对位置只能用 css 处理。
@Yoshi：我正在从代码隐藏生成通知 div，将它们添加到容器 div 不是问题。我会试试的。
@Yoshi：如果我将它们添加到包装器并为其设置动画，它们根本不会移动。我认为这是因为AlwaysVisibleControl-Extender 的position:absolute。
你能展示一些渲染的html/css吗？

标签： javascript jquery asp.net css asp.net-ajax

【解决方案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);
}

【讨论】：

+1 谢谢。但是包装器控件是不必要的。 jQuery的each函数和第一个div到页面顶部的距离是all i need;)
@Tim 我想出了这个主意，因为你问如何将它们放置在某个东西中以成为另一个，并且它不那么复杂。无论如何添加偏移量也是个好主意。

【解决方案2】：

@Yoshi 和@Aristos 的方法的缺点是破坏了AlwaysVisibleControls js 功能。还是谢谢你:)

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

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

【讨论】：