Mike Mike - 5 months ago 6
Javascript Question

Jquery animate with inline-block divs not working?

Can anybody enlighten me on what I have wrong or why this code isn't working? I think it is obvious what I am trying but the animate seems to pull down the other divs. I can't get my head around what is happening!

$("#optionDoors").click(function() {
$(this).animate({
height: "50px",
lineHeight: "50px"
});
});


* {
margin: 0px;
padding: 0px;
}

body {
margin: 0px;
padding: 0px;
}

div {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}

div#mainContainer {
position: relative;
width: 950px;
height: 1000px;
border: 2px solid green;
margin: 0px auto;
}

#productChoice {
position: relative;
width: 100%;
}

#productChoice div {
display: inline-block;
position: relative;
width: 236.5px;
height: 40px;
text-align: center;
line-height: 40px;
vertical-align: middle;
border-right: 1px solid black;
border-bottom: 1px solid black;
cursor: pointer;
}

#productChoice div:last-child {
border-right: none;
}


<div id='mainContainer'>
<div id='productChoice'>
<div id='optionDoors'>
<span>Option1</span>
</div>
<div>
<span>Option2</span>
</div>
<div>
<span>Option3</span>
</div>
<div>
<span>Option4</span>
</div>
</div>
</div>


Example here so it's clear what is happening... https://jsfiddle.net/L6zkxzpn/

Answer

The problem is that #productChoice div has the style vertical-align: middle; set. So when you increase the size of the first div, all of the others re-align themselves downwards because #productChoice has increased in size to cater for its bigger first child.

Change this style to vertical-align: top; to solve the problem.