jQuery 调整边框大小和一些填充的弹跳效果

Question

如果 jQuery 弹跳效果应用于 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');
});

谁能解释一下这个现象？

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

jQuery 调整边框大小和一些填充的弹跳效果

jQuery bounce effect with border box-sizing and some padding

css

jquery

jquery-ui

padding

HTML

CSS

JavaScript