jQuery弹跳效果与边框大小和一些填充

Question

如果jQuery反弹效果应用于带有box-sizing的div：border-box和一些填充，它会在效果动画期间缩小其填充大小。请参阅here。

HTML

<div class="test">
    This is test div to bounce!
</div>

CSS

.test {
    box-sizing: border-box;
    min-height: 100px;
    width: 250px;
    background-color: #435ff3;
    text-align: center;
    cursor: pointer;
    padding: 50px;
}

的JavaScript

$('.test').click(function() {
    $(this).effect('bounce', { distance : 10, times: 2 }, 'slow');
});

有人可以解释这种现象吗？

Answer 1

这是一个知道错误报告here。根据票证，这应该在版本1.12中修复

一个小的解决方法可能是添加另一个带填充的容器：

<强> HTML

<div class="test">
    <div class="container">
        This is test div to bounce!
    </div>
</div>

<强> CSS

.container{
    padding: 50px;
}

注意：在效果期间，覆盖边距和填充都会被覆盖，因为通过jQuery添加了内联样式（在您的情况下）：

font-size: 100%; 
background: transparent none repeat scroll 0% 0%; 
border: medium none; 
margin: 0px; 
padding: 0px; 
position: relative; 
width: 250px; 
height: 140px; 
float: none;

Demo