jQuery UI 震动 - 填充消失

Question

我遇到了这个小问题。我的 wrapper 里有一个盒子，我想来回摇晃它。效果很好，但是当我向 #box 添加填充时，填充会在动画打开时消失。 #box 还有一个 box-sizing: border-box 所以填充不会影响框的大小。

如果我删除 box-sizing: border-box 动画会工作，但是填充会影响盒子的实际大小，每边额外增加 20px，这不是预期的.

我尝试在 padding 和 box-sizing 中添加 !important，但这也没有用。

我也试过用 content-box 改变 border-box (来自谷歌搜索的答案) 但那没有要么工作。

---

这是我的代码:

HEAD 部分:

<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 );

Here is a Fiddle Live Demo

知道发生了什么吗？

谢谢 - TheYaXxE

Answer 1

我不确定为什么会这样，动画期间没有考虑填充和边距。但是我管理了一个变通方法，为内容创建了另一个容器，你不能在动画元素上设置填充，但你可以在其中的另一个元素上设置。

检查这个 fiddle > http://jsfiddle.net/luckmattos/uX3g6/2/

HTML

<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 是一样的