fiddle

Question

我正在开发一个jQuery动画，它可以在鼠标输入时扩展div.panel的高度，并在鼠标输出时将其恢复正常。

动画适用于所选的div.panel，但问题是相对的，当鼠标悬停在div.panel.panel-big上时，附近的元素从初始位置向下移动。

这是fiddle。

Answer 1

我认为您希望展开<li>，而不是整个panel。问题是你选择.panel，这适用于整个事情。

fiddle

<强> JavaScript的：

$(document).ready(function () {
    $("li", this).hover(function () {
        $(this).animate({
            "height": "+=25px"
        }, "fast");
    }, function () {
        $(this).animate({
            "height": "-=25px"
        }, 300);
    });
});

请注意从$(".panel", this).hover(…)到$("li", this).hover(…的更改。这会导致这些片段在鼠标输入和鼠标移出时正确扩展/收缩。

告诉我这是不是预期的行为。

Answer 2

问题是在css中，您已将“.panel”的垂直对齐设置为中间。因此，当“.panel-big”放大时，父div（“.row”）也会放大，导致panel-small略微下降以保持垂直居中。也许你应该将.panel的vertical-align设置为“top”，并为面板设置一个margin-top。

.panel {
    color: #ffffff;
    margin: 10px 5px;
    text-align: center;
    font-size: 13pt;
    vertical-align: top;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: inline-block;
}
.panel-small {
    background-color: #bfbfbf;
    width: 250px;
    height: 450px;
    max-height: 475px;
        margin-top: 50px;
}

这是我调整的小提琴： http://jsfiddle.net/2zgXC/4/

jQuery - div动画：鼠标悬停时，其他div会改变它们的位置

2 个答案:

fiddle