使用jquery制作动画时如何避免兄弟元素抖动答案

【问题标题】：How avoid sibling element from shaking when animate with jquery使用jquery制作动画时如何避免兄弟元素抖动
【发布时间】：2013-06-12 05:29:03
【问题描述】：

我有两个并排的 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
    });
});

我不能使用边距代替边框，因为我使用的是带有边框来源的背景图像，所以我不希望它与其内容一起移动。

有什么帮助吗？

【问题讨论】：

为什么投反对票？这是一个很好的问题。

标签： javascript jquery jquery-animate

【解决方案1】：

告诉浏览器将填充和边框宽度保持在定义的高度/宽度内，这样它就不会认为尺寸在改变：

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

http://jsfiddle.net/exvEa/

【讨论】：

三个答案中唯一没有解决问题的被标记为正确，我不明白OP的标准。
box-sizing CSS property 是实验性的，仅适用于 Firefox。这不是正确的答案。
实际上，这个 anwser（和其他人）给了我同样的线索来解决我的问题而无需包装器。我的解决方案依赖于指定明确的宽度和高度，而不是使用填充。
顺便说一下，box-sizing 是当前所有浏览器都支持的 [caniuse.com/css3-boxsizing].只有padding-box 选项是实验性的。另外，当提供的小提琴另有说明时，请告诉我们这不能解决问题。

【解决方案2】：

如果你不介意一些修改...我会选择 CSS 定位。

虽然这会有一个额外的标签比如：

<div id="mother">
    <div class='a'></div>
<div class='b'></div>
    </div>

在您的原始 CSS 中：

#mother{
position:relative;  width:210px;
}
    .a {
       width: 80px;
       height: 80px;
       padding: 10px;
       border: 0px solid yellow;
       background-color: red;
       display: inline-block;
       position:absolute; 
       left:0px; 
    }

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

jQuery:

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

试试看....

http://jsfiddle.net/8jFyL/

【讨论】：

【解决方案3】：

如果小的 html/css 更改没有问题： http://jsfiddle.net/YqZSv/8/

HTML：

<div class="box">

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

CSS：

.box {
width:100px;
    height:100px;
    margin-right:20px;
    float:left;
}
.a {
    width: 80px;
    height: 80px;
    padding: 10px;
    border: 0px solid yellow;
    background-color: red;
    display: inline-block
}

.b {
    width: 80px;
    height: 80px;
     padding: 10px;
    background-color: blue;
    display: inline-block;

}

基本上，一个 div 作为包装器...

【讨论】：

谢谢大家！！我真的不知道哪个是最好的遮阳篷。