带边框框大小和一些填充的jQuery反弹效果

如果jQuery bounce effect应用于具有“框大小：边框框”和一些填充的div，则在效果动画期间，它会按填充大小缩小。看

HTML JavaScript

---

有人能解释这种现象吗？

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

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

HTML

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

注意：由于通过jQuery添加的内联样式（在您的示例中），在效果期间，边距和填充都被覆盖：

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

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

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

.container{
    padding: 50px;
}

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;