Как избежать смещения элемента сиблинга при анимации с помощью 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

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

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

http://jsfiddle.net/exvEa/

Answer 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 
    }); 
}); 

Try, что ... .

http://jsfiddle.net/8jFyL/

Answer 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 в качестве обертки ...