Updated Fiddle

Question

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

如果我删除动画的box-sizing: border-box，但填充影响了盒子的实际大小，可以在每一面添加额外的20px，这不是预期的。

我试图将!important padding和box-sizing放在一起，但这也不起作用。

我还尝试使用border-box （来自Google搜索的答案）更改content-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

知道发生了什么事吗？

谢谢--YaXxE

Answer 1

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

Answer 2

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

检查这个小提琴＆gt; 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是相同的

jQuery UI震动 - 填充消失

这是我的代码：

2 个答案:

Updated Fiddle