Question

我一直在努力为没有设置高度和宽度的盒子设置动画。到目前为止它还在工作，有点问题。

该框包含文本按钮，所有文本按钮的宽度相同且文本居中。问题不是所有文本都是相同的长度，因此动画短文本从左到右滚动。这不是一个大问题，但看起来有点愚蠢。

De代码如下，这里有一个Fiddle来演示。（我已经将动画设置为1500以使问题更加明显）。正如你所看到的那样，短片＆＃39;按钮滚动到中间。我希望 - 如果可能的话 - 是按钮设置＆＃39;在中间，所以在动画时它们已经处于正确的位置。

我根本不知道它有可能，但如果有的话，任何帮助都会受到赞赏。

HTML：

<div id="pref_boxwrap">
    <div id="pref_box" class="prefbox_m1 prefbox_cll">
        <div class="prefbox_mm11 prefbox_cld">Header</div>
        <div class="prefbox_x222 act" _fsc="1,1910">
            <div class="prefbox_y222"><span class="sp1 prefbox_clb"><span class="sp2">Short</span></span>
            </div>
        </div>
        <div class="prefbox_x222 act" _fsc="1,1920">
            <div class="prefbox_y222"><span class="sp1 prefbox_clb"><span class="sp2">This is a longer button <span id="fgr">('+tgr+'%)<span></span></span>
            </div>
        </div>
        <div class="prefbox_x222 act" _fsc="1,1930">
            <div class="prefbox_y222"><span class="sp1 prefbox_clb"><span class="sp2">And another very very very long button <span id="fkl">('+tgr+'%)<span></span></span>
            </div>
        </div>
    </div>
</div>
</div>

CSS：

#pref_boxwrap {
    position: absolute;
    margin-top: 20px;
    margin-left: 35px;
    z-index:2030;
}
.prefbox_m1 {
    position: absolute;
    visibility: hidden;
    font-size: 1em;
    z-index:2926;
    -webkit-box-shadow: 0 14px 14px 0px #000;
    -moz-box-shadow: 0 14px 14px 0px #000;
    box-shadow: -3px -3px 3px 0px #fff;
}
.prefbox_mm11 {
    height: 24px;
    padding: 2px 0 2px 9px;
    color: #fff;
    text-align: left;
    font-weight: bold;
    font-size: 100%;
}
.prefbox_x222 {
    margin: 2px 0;
    padding: 5px;
    background: blue;
}
.prefbox_y222 {
    line-height: 29px;
    white-space: nowrap;
    height: 29px;
    width: 100%;
    color: #fff;
    background: orange;
}
.prefbox_y222 .sp1 {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
}
.prefbox_y222 .sp2 {
    padding: 0 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

更新我用下面的答案解决了这个问题，但还有另外一个问题，通过设置动画框不再具有灵活性。因此，替换buttontext或更改运行中的字体大小不再改变框的大小。我通过在jquery动画中添加3行代码解决了这个问题：复制内容，更改css名称并在动画后替换容器内容。它有点hacky但现在很好用。

这是一个新的工作FIDDLE

Answer 1

在开始动画之前，在子div（即标题和按钮容器）上设置固定的像素宽度。请参阅我添加此行的updated fiddle：

$("#pref_box > *").outerWidth(x);

对于固定宽度，整个动画中的按钮大小相同，并且中心对齐问题将不复存在。

Answer 2

不完全是为了减少因设置宽度和高度而产生的问题，但是如果你只为高度设置动画，它会解决你的问题吗？

更改行：

$("#pref_box").width(0).height(0);

到

$("#pref_box").height(0);

并删除：

width: x + "px",

这样你就可以减少＆＃34;折叠＆＃34;影响。为.prefbox_m1添加以下属性的CSS：min-width:300px;（或任何所需的值）

儿童元素＆＃39; width设置为100％，因此它们始终更新为父动画的当前宽度。通过为父元素设置固定宽度并仅设置高度动画，或者为子元素提供固定宽度也可以解决它。

jQuery动画和文本对齐中心

2 个答案: