顺利更改 css

您可以使用 CSS 来实现此目的。只需将此规则添加到您的 CSS 声明中即可#main：

#main {
    -khtml-transition: height 0.3s ease;
    -moz-transition: height 0.3s ease;
    -ms-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    -webkit-transition: height 0.3s ease;
    transition: height 0.3s ease;
}

在这里，height 部分定义要应用转换的属性，0.3s定义从一种状态转换到另一种状态所需的时间，ease 属性定义转换的函数。缓和将缓慢加速到 50% 的过渡，然后减速到 100%。

与jQuery的animate函数相比，使用CSS的优势在于CSS转换在支持时是硬件加速的，并且会更流畅，更高效。缺点是某些过时的浏览器版本不支持该效果，但它只会回退到非动画高度变化，而不是中断。

要了解有关CSS过渡的更多信息，请点击以下指向Mozilla文章的链接。它们是这类事情的绝佳参考，也是开始学习甚至复习知识的绝佳场所。我还在下面提供了这种技术的示例。

MDN 关于过渡的文章。

这是一个 jsfiddle 示例。

是的，使用 jquerys animate()方法，http://api.jquery.com/animate/。

如果要使用"线性"或"摆动"以外的缓动类型，请包含 jquery UI。它作为第二个参数（字符串）传递给 animate 方法。https://jqueryui.com/easing/

示例（加载了 jquery UI）：

$(selector).animate({ height: '200px' }, 'easeInOutCubic', function(){ 
    /* animation comlete */ 
});

另外，还要提高您的接受率。

您可以使用 animate 来实现：

var oldHeight = $("#main").height();
$("#main").animate({'height', oldHeight + 187}, { duration: 500, queue: false });

如果你想用CSS和类进行操作，而不是style属性，你可以使用jquery-ui的switchClass()或toggleClass()方法 http://docs.jquery.com/UI/Effects/switchClass http://jqueryui.com/demos/toggleClass/

Use animate（）...

var showHideMemberContent = function(){
if(isHidden === false){
    $("#showHideMemberContent").text("Member Content");
    $("#main").animate({height:-=187}, 300);
    $('#mainBottom').hide('slow', function() {
        isHidden = true;
    });
} else {
    $("#showHideMemberContent").text("Verberg");
    $("#main").animate({height:+=187}, 300);
    $('#mainBottom').show('slow', function() {
        isHidden = false;
    });
}
    };