jquery - CSS/jQuery : Reduce the height of overflow'ed div as another div slides in

Question

这是我的 fiddle http://jsfiddle.net/vZjnd/

鉴于事实

.wrapper 高度是固定的。

.main 是自动溢出的。

.slide 内容是可变的，因此高度不时是可变的。

我的目标是

.main 被推上去(高度降低)因为 .slide 占据了 .wrapper 的一部分

有什么想法吗？

Answer 1

这是我的解决方案:

$('#up').click(function() {
    $('.slide').slideUp(function() {
        $('.main').height($('.main').height() + $('.slide').height() + 'px');
    });
});

$('#down').click(function() {
    $('.slide').slideDown(function() {       
        $('.main').height($('.main').height() - $('.slide').height() + 'px');
    });
});

代码:http://jsfiddle.net/vZjnd/5/

你可以使用animate让它更流畅。