jquery

Question

ile canlandırıldığında kardeş öğesinin titremesinden nasıl kaçınıyorum Yan yana iki div öğesi var. İlk önce fareyi hareket ettirip canlandırdığımda, sıradaki kişi garip bir şekilde sarsılır. Bakın: http://jsfiddle.net/YqZSv/1/ Sadece doldurma ve kenarlık söz konusu olduğunda gerçekleştiğini fark ettim. Kenar boşluğu ile değiştirirseniz, 'çalkalama' efekti durur.

HTML

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

i sınır kökene sahip bir arka plan resmi kullanmak çünkü yerine sınırın marjı kullanamaz

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

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, bu yüzden don İçeriği ile birlikte hareket etmesini istemiyorum.

Herhangi bir yardım?

Answer 1

o boyutu değişiyor düşünmüyor böylece tanımlanan yükseklik/genişlik içindeki dolgu ve sınır-genişliğini hem tutmak tarayıcıya bildirin: Bunu yapmazsanız

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

http://jsfiddle.net/exvEa/

Answer 2

Bazı değişikliklere dikkat et ... CSS Konumlandırması için giderdim. Orijinal CSS'nizde

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

ve:

#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: Bu olsa

gibi ek bir etiket Something olacak

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

o deneyin ...

http://jsfiddle.net/8jFyL/

Answer 3

küçük html/css değişiklikleri sorun değilse: 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; 

} 

Temelde, sargı olarak bir div ...