[英]Animate multiple elemts from middle to top with jQuery
i'm trying to move divs(actually they are AlwaysVisibleControls ) from center-screen to the top of the page after a few seconds. 我正在尝试在几秒钟后将div(实际上它们是AlwaysVisibleControls )从中心屏幕移动到页面顶部。
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
). 这行得通,但是问题在于可以有多个通知( $('.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. 编辑 :在我将notification-div添加到container-div并尝试对其进行动画处理之后,它根本不会动画。 This is the generated HTML/CSS(note: the outer div is an UpdatePanel): 这是生成的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-File: 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');
}
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. 我建议将所有消息放置在一个div中,并将此div设置在页面顶部的abosule位置,并为保存所有消息的该div设置动画。 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. 我认为您甚至可以将所有元素都放在该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>
and your javascript 和你的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);
}
The approaches from @Yoshi and @Aristos had the disadvatage of breaking the AlwaysVisibleControls
js-functionality. @Yoshi和@Aristos的方法不符合打破AlwaysVisibleControls
js功能的AlwaysVisibleControls
。 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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.