jQuery-div動畫：在鼠標懸停時，其他div更改其位置

Question

我正在研究一種jQuery動畫，該動畫在鼠標進入時擴展div.panel的高度，在鼠標div.panel時將其收縮回正常。

動畫適用於選定的div.panel ，但問題是附近的元素相對存在，當鼠標懸停在div.panel.panel-big上方時，該元素將從其初始位置向下移動。

這是一個小提琴 。

Answer 1

我想您想擴展<li>而不是整個panel 。 問題在於您正在選擇.panel ，它適用於整個事情。

小提琴

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”）也會放大，從而使“ small-panel”下降一點，以保持垂直居中。 也許您應該將.panel的垂直對齊方式設置為“頂部”，而只需將小面板的邊緣放在頂部。

.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/