JQuery Bounce 效果改变元素的大小

Question

我有一个像 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 的小框。目前，框和动画中有一个“1”似乎缩小宽度以适应“1”，然后在效果完成后才恢复到正常大小 - 我尝试使用 CSS 中的填充来填充框中 1 的侧面，但这没有效果 - 有什么想法吗？

Answer 1

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

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