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

在.NotificationsBox 样式中添加min-height 和min-width。

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