javascript - 使用 jquery 设置动画时如何避免兄弟元素摇晃

Question

我有两个并排的 div 元素。当我将鼠标移到第一个上并为其设置动画时，下一个会奇怪地摇晃。看这里:http://jsfiddle.net/YqZSv/1/我注意到只有在涉及填充和边框时才会发生这种情况。如果我用边距替换边框，“摇晃”效果就会停止。

HTML

<div class='a'></div>
<div class='b'></div>

CSS

.a {
   width: 80px;
   height: 80px;
   padding: 10px;
   border: 0px solid yellow;
   background-color: red;
   display: inline-block
}

.b {
   width: 100px;
   height: 100px;
   background-color: blue;
   display: inline-block;
   margin-left: 20px;
}

jQuery

$('.a').mouseenter(function(){
    $(this).animate({
        'padding': 0,
        'borderWidth': 10
    });
}).mouseleave(function(){
    $(this).animate({
       'padding': 10,
       'borderWidth': 0
    });
});

我不能使用边距而不是边框​​，因为我使用的背景图像具有边框原点，所以我不希望它与其内容一起移动。

有什么帮助吗？

Answer 1

告诉浏览器将 padding 和 border-width 都保持在定义的高度/宽度内，这样它就不会认为尺寸发生变化:

div.a { box-sizing:border-box; }

http://jsfiddle.net/exvEa/