jquery - 在另一个 div 的高度变化时制作一个 div 幻灯片

Question

我试图让一个 div 在改变高度时跟随他的同伴 div 的最低边界。有几个事件会导致高度发生变化，我正在考虑将功能添加到所有这些事件中。但是它没有按预期工作。这是一些代码:

HTML:

<div class="container">
    <div id="resForm">
        <div href class="bookCommentsToggle">Click Here</div>
        <div class="bookComments"></div>
    </div>
    <div class="adjustPriceHeight"></div>
    <div class="machine-right"></div>
    <div style="clear:both;"></div>
</div>

CSS:

.container {
    height:400px;
    width:400px;
    background:#ccc;
}
#resForm {
    float:left;
    width:200px;
    background:yellow;
}
.bookCommentsToggle {
    height:50px;
    cursor:pointer;
}
.bookComments {
    width:100px;
    height:300px;
    background:red;
    display:none;
}
.machine-right {
    float:right;
    height:50px;
    width:200px;
    background:blue;
}
.adjustPriceHeight {
    width:200px;
    background:#fff;
    float:right;
}

jQuery:

function adjustPriceH() {
    var totalHeight = $('#resForm').outerHeight(),
        priceHeight = $('.machine-right').outerHeight(),
        pushPrice = totalHeight - priceHeight;

    $('.adjustPriceHeight').css('height', pushPrice).slideDown('slow');
}

$('.bookCommentsToggle').click(function () {
    $('.bookComments').slideToggle('slow', function(){
        adjustPriceH();
    });
});

JSFiddle

我希望 .machine-right 在 #resForm 调整其大小时移动。我觉得我已经很接近了，但还不够。

希望看到我通常从 SO 专家那里得到的那些单行解决方案之一，编码愉快^^

Answer 1

不尝试执行回调； .slideToggle(持续时间，回调)

这使得它在触发动画之前等到幻灯片完成；您需要它按照设置的方式进行高度计算。

如果高度始终相同

因此，给 .bookComments 和 .adjustPriceHeight 相同的高度和 display:none，然后同时滑动它们。您只需要将 clear:right 添加到 .machine-right 并且您的 jquery 将变成:

$('.bookCommentsToggle').on('click', function () {
    $('.bookComments, .adjustPriceHeight').slideToggle('slow');
});

做了一个 fiddle :http://jsfiddle.net/filever10/7xEUZ/

如果高度不同

您需要从您的函数中删除 slideDown 以防止冲突命令引起的抖动。

function aph() {
    var th = $('#resForm').outerHeight(),
        ph = $('.machine-right').outerHeight(),
        pp = th - ph;
    $('.adjustPriceHeight').height(pp);//no need for css or slideDown here
}

//like @mainguy suggests, cause he's awesome
$('.bookCommentsToggle').on('click', function () {
    $('.bookComments').stop().slideToggle({ progress:aph }, 'slow');
});

做了一个 fiddle :http://jsfiddle.net/filever10/h5c4U/