Question

有人可以告诉我我的错误或为什么这段代码不起作用？我认为很明显我正在尝试但是动画似乎会拉低其他div。我无法理解正在发生的事情！

ALTER TABLE tableName
ADD vac_var DECIMAL(16, 6)

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

此处示例，以便明确发生了什么... https://jsfiddle.net/L6zkxzpn/

Answer 1

问题是#productChoice div设置了样式vertical-align: middle;。因此，当你增加第一个div的大小时，所有其他人都会向下重新调整，因为#productChoice的大小已经增加，以迎合其更大的第一个孩子。

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

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

1 个答案: