Jquery/CSS - 使用slideUp()时,使容器元素保持相同的高度;

Question

我想知道在使用slideup()时是否有办法让父容器保持相同的高度; 这样做的原因是我创建了一个元素slideUp,然后使用新数据进行slideDown,但这使得浏览器窗口在slideUp开始时向上滚动到顶部,因此它变得相当烦人,尤其是在低分辨率时.

Answer 1

您可以简单地获取父级的高度并通过JQuery将其设置为固定的高度,就像我在JSFiddle上创建的示例一样:

http://jsfiddle.net/wEGk5/

$(document).ready(function() {

    $('input#slideup').click(function() {
        //Fix the current height of the parent container
        $('div.parent').css({ 'height' : ($('div.parent').height())});
        //Slide up and add new content to the div
        $('div#slider').slideUp('slow', function() {
            $('div#slider').html("New content!<br />New content!");
        });

        //Slide down again and watch how the parent container didn't move!
        $('div#slider').slideDown();
    });

});