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

【问题标题】：jQuery bounce effect with border box-sizing and some padding带有边框大小和一些填充的jQuery反弹效果
【发布时间】：2015-05-10 10:31:50
【问题描述】：

如果 jQuery 反弹效果应用于具有 box-sizing:border-box 和一些填充的 div，则在效果动画期间它会缩小其填充大小。见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');
});

谁能解释一下这个现象？

【问题讨论】：

标签： jquery css jquery-ui padding

【解决方案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

【讨论】：