Как избежать сотрясения элемента от встряхивания при анимации с помощью jquery

У меня есть два элемента 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
    });
});

Я не могу использовать margin вместо border, потому что я использую фоновое изображение с появлением границы, поэтому я не хочу, чтобы он перемещался вместе с его содержимым.

Любая помощь?

Ответ 1

Сообщайте обозревателю, чтобы он сохранял как прописку, так и ширину границы внутри определенной высоты/ширины, поэтому он не думает, что размер изменяется:

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

http://jsfiddle.net/exvEa/

Ответ 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 как обертка...