jQuery UI震动 - 填充消失

Question

我有这个小问题.我的包装盒里面有一个盒子,我想来回摇动.效果很好,但是当我#box在动画打开时向填充添加填充消失时.该#box也有一个box-sizing: border-box这样的填充不会影响框的大小.

如果我删除box-sizing: border-box动画效果,但填充影响了框的实际大小,通过在每一侧添加额外20px,这是不打算的.

我试图把一!important对中padding和box-sizing,但没有任何工作.

我也试过改变border-box用content-box (从谷歌搜索的答案),但它还是不奏效.

---

这是我的代码:

头部分:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

HTML:

<div id="wrapper">
    <div id="box">
    </div>
</div>

CSS:

body {
    margin:                                         0;
    padding:                                        0;
}

* {
    -webkit-box-sizing:                             border-box;
    -moz-box-sizing:                                border-box;
    -o-box-sizing:                                  border-box;
    -ms-box-sizing:                                 border-box;
    box-sizing:                                     border-box;
}

#wrapper {
    width:                                          400px;
    height:                                         250px;
    position:                                       absolute;
    top:                                            0;
    right:                                          0;
    bottom:                                         0;
    left:                                           0;
    margin:                                         auto;
}

#box {
    width:                                          400px;
    height:                                         250px;
    background:                                     gray;
    padding:                                        20px;
}

jQuery的:

$("#box").effect( "shake", { direction: "left", times: 4, distance: 50}, 2600 );

这是一个小提琴现场演示

知道发生了什么事吗？

谢谢--TheYaXxE

Answer 1

我不确定为什么会发生这种情况，动画期间不考虑填充和边距。但我管理一种解决方法，为内容创建另一个容器，您无法在动画元素上设置填充，但可以在其中的另一个元素上设置填充。

检查这个小提琴> http://jsfiddle.net/luckmattos/uX3g6/2/

超文本标记语言

<div id="wrapper">
    <div id="box">
        <div class="container">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
        </div>
    </div>
</div>

CSS

body {
    margin:                                         0;
    padding:                                        0;
}

* {
    -webkit-box-sizing:                             border-box;
    -moz-box-sizing:                                border-box;
    -o-box-sizing:                                  border-box;
    -ms-box-sizing:                                 border-box;
    box-sizing:                                     border-box;
}

#wrapper {
    width:                                          400px;
    height:                                         250px;
    position:                                       absolute;
    top:                                            0;
    right:                                          0;
    bottom:                                         0;
    left:                                           0;
    margin:                                         auto;
}

#box {
    height:                                         250px;
    background:                                     gray;
}

.container {
    background:#f00;
    height:                                         250px;
    padding:                                        20px;
}

JS 是一样的