Jquery 使用内联块 div 的动画不起作用？

Question

谁能告诉我我哪里错了或者为什么这段代码不起作用？我认为我正在尝试的很明显，但动画似乎拉低了其他 div。我无法理解正在发生的事情！

$("#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>

这里的例子很清楚发生了什么......https://jsfiddle.net/L6zkxzpn/

Answer 1

问题是 #productChoice div 设置了样式 vertical-align: middle;。因此，当您增加第一个 div 的尺寸时，所有其他 re-align 本身都会向下，因为 #productChoice 已经增加尺寸以满足其更大的第一个 child。

将此样式更改为vertical-align: top;以解决问题。

Jquery 使用内联块 div 的动画不起作用？

Jquery animate with inline-block divs not working?

javascript

jquery

jquery-animate