Question

我有一个＆＃34;通知框＆＃34;像CSS一样;

.NotificationsBox
{
 text-align:center;
 position:absolute;
 height:17px;
 width:17px;
 border: 1px solid #FFFFFF;   
 Background-Color: #0099FF;
 border-color: #FFFFFF;
 top:65px;
 left:500px;
}

在JQuery中使用弹跳效果进行操作;

<script>
$(window).load(function () {
    $(".NotificationsBox").effect("bounce", { times: 3 }, "slow");
});
</script>

HTML;

<asp:FormView ID="FormView1" runat="server" DataSourceID="NotifyMe">
<ItemTemplate>
<asp:Label ID="NotificationLabel2" runat="server"  
Text='<%# Bind("[Notifications]") %>'
CssClass="NotificationsBox"  />
</ItemTemplate>
</asp:FormView>

跳出效果很好，除了在跳出效果期间框的宽度发生变化 - 它在CSS中设置为17px x 17px的小方框。目前有一个＆＃39; 1＆＃39;在框中，动画似乎缩小宽度以适应＆＃39; 1＆＃39;只有在效果结束后才会恢复到正常大小 - 我已尝试在CSS中使用填充来填充框中1的边，但这没有任何效果 - 任何想法？

Answer 1

将min-height和min-width添加到.NotificationsBox样式。

min-height:17px;
min-width:17px;

JQuery Bounce效果改变了元素的大小

1 个答案: