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

Here is a Fiddle Live Demo

知道发生了什么吗？

谢谢 - TheYaXxE

Answer 1

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

检查这个小提琴 > 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 是一样的

Answer 2

Updated Fiddle

将以下内容添加到动画上方的代码中：

if ($.ui) {
    (function () {
        var oldEffect = $.fn.effect;
        $.fn.effect = function (effectName) {
            if (effectName === "shake") {
                var old = $.effects.createWrapper;
                $.effects.createWrapper = function (element) {
                    var result;
                    var oldCSS = $.fn.css;

                    $.fn.css = function (size) {
                        var _element = this;
                        var hasOwn = Object.prototype.hasOwnProperty;
                        return _element === element && hasOwn.call(size, "width") && hasOwn.call(size, "height") && _element || oldCSS.apply(this, arguments);
                    };

                    result = old.apply(this, arguments);

                    $.fn.css = oldCSS;
                    return result;
                };
            }
            return oldEffect.apply(this, arguments);
        };
    })();
}

This is a known bug