Javascript 隐藏内容时如何保持页面高度？

在执行Ajax调用时，我试图保持页面的当前高度。在显示新内容之前，几乎所有内容都是隐藏的，因此浏览器会滚动到页面顶部，因为在转换过程中下面没有内容

linksPages.on('click',function(e){
            e.preventDefault();
            jQuery.post(MyAjax.url, {action : 'ajax' ,href : $(this).attr('href') }, function(response) {
            $('#content').fadeOut();           
            setTimeout(function() {
                $('#content').html(response).fadeIn();
            }, 500);
        });
});

我考虑添加一个类，如：

linksPages.on('click',function(e){
            e.preventDefault();
            jQuery.post(MyAjax.url, {action : 'ajax' ,href : $(this).attr('href') }, function(response) {
            //$('#content').fadeOut();
            $('#content').addClass('cortinaIn');
            setTimeout(function() {
                $('#content').html(response).fadeIn();
                $('#content').removeClass('cortinaIn');
                $('#content').addClass('cortinaOut');
            }, 500);
            $('#content').removeClass('cortinaOut');
        });
});

并定义cortinaIn和cortinaOut CSS规则：

.cortinaIn {
    transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-delay: 0.1s;
    -moz-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    -moz-transition-duration: 0.3s;
    -moz-transition-timing-function: ease-out;
    -moz-transition-delay: 0.1s;
    -webkit-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-delay: 0.1s;
    -o-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    -o-transition-duration: 0.3s;
    -o-transition-timing-function: ease-out;
    -o-transition-delay: 0.1s;
    transform:scale(0, 1);
    transform-origin: center center;
    -ms-transform:scale(0, 1); /* IE 9 */
    -ms-transform-origin: center center;
    -webkit-transform:scale(0, 1); /* Safari and Chrome */
    -webkit-transform-origin: center center;
    -o-transform:scale(0, 1); /* Opera */
    -o-transform-origin: center center;
}
.cortinaOut {
    transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    transition-delay: 0.1s;
    -moz-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    -moz-transition-duration: 0.3s;
    -moz-transition-timing-function: ease-out;
    -moz-transition-delay: 0.1s;
    -webkit-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-delay: 0.1s;
    -o-transition-property: transform, -webkit-transform, -o-transform, -ms-transform;
    -o-transition-duration: 0.3s;
    -o-transition-timing-function: ease-out;
    -o-transition-delay: 0.1s;
    transform:scale(1, 1);
    transform-origin: center center;
    -ms-transform:scale(1, 1); /* IE 9 */
    -ms-transform-origin: center center;
    -webkit-transform:scale(1, 1); /* Safari and Chrome */
    -webkit-transform-origin: center center;
    -o-transform:scale(1, 1); /* Opera */
    -o-transform-origin: center center;
}

---

这很好用，但我不能用CSS变换找到淡入和淡出效果。有什么想法可以实现这种行为吗

这比你做的要简单得多

linksPages.on('click',function(e){
    e.preventDefault();
    jQuery.post(MyAjax.url, {action : 'ajax' ,href : $(this).attr('href') }, function(response) {
         $('#content').addClass('cortinaOut');
         setTimeout(function() {
             $('#content').removeClass('cortinaOut');
         }, 500);
    });
});

然后在CSS中，有以下内容：

#content {
    transition: opacity 0.3s ease-out;
    opacity: 1;
}

.cortinaOut {
    transition: opacity 0.3s ease-out;
    opacity: 0;
}

---

.

这比你做的要简单得多

linksPages.on('click',function(e){
    e.preventDefault();
    jQuery.post(MyAjax.url, {action : 'ajax' ,href : $(this).attr('href') }, function(response) {
         $('#content').addClass('cortinaOut');
         setTimeout(function() {
             $('#content').removeClass('cortinaOut');
         }, 500);
    });
});

然后在CSS中，有以下内容：

#content {
    transition: opacity 0.3s ease-out;
    opacity: 1;
}

.cortinaOut {
    transition: opacity 0.3s ease-out;
    opacity: 0;
}

.

使用css visibility:hidden将隐藏元素，就像不透明度为0一样，但仍将占用空间，元素将围绕它流动，从而保留其容器元素的高度

问题是jQuery在使用其fadeIn/out方法时会自动执行display:block/display:none。我可能会使用jquery插件（我不知道），但有很多，或者直接使用css3转换，并最有效地滚动您自己的函数。

使用css可见性：hidden将隐藏元素，就像不透明度：0一样，但仍会占用空间，元素将围绕它流动，从而保留其容器元素的高度

---

问题是jQuery在使用其fadeIn/out方法时会自动执行display:block/display:none。我可能会使用jquery插件（我不知道），但有很多插件，或者直接使用css3转换，最有效、最高效地运行自己的函数。

太棒了！谢谢@knrzGreat！谢谢@KNRZ感谢你的回答。我尝试使用.animate方法更改可见性，但不起作用。最后我选择了@knrz答案。谢谢你的回答。我尝试使用.animate方法更改可见性，但不起作用。最后我选择了@knrz答案。