Javascript 平滑地更改css

我的情况如下：

我有以下功能

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

因此，当函数执行时，它会隐藏“mainBottom”div。“main”div应该减少/增加其高度。 确实如此，但我需要知道是否有一种方法可以顺利做到这一点

---

谢谢。是的，请使用jquerys

animate（）

方法

如果要使用除“线性”或“摆动”以外的缓和类型，请包括jquery ui。它作为第二个参数（字符串）传递给animate方法

示例（加载jquery ui时）：

---

此外，请确定您的接受率。

您可以使用动画：

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

---

如果您想使用css和类，而不是样式属性，那么可以使用jQueryUI的

switchClass（）

或

toggleClass（）

方法http://jqueryui.com/demos/toggleClass/使用动画（）

---

您可以使用CSS来实现这一点。只需将此规则添加到

#main

的CSS声明中：

#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文章的链接。它们是这类事情的一个很好的参考，也是开始学习甚至复习知识的好地方。下面我还包括了一个这种技术的例子

---

所说的“平滑”是指你希望看到它以某种方式逐渐增大，而不是直接跳到新的尺寸？animate（）的核心版本也提供了放松。@nnnnnn是的，但现在只有两个测量，“swing”和“linear”@mrsliptyFist“你能提供一些我如何处理这个问题的技巧吗？”。你的利率很低。低利率的人通常不会因此得到帮助。所以，要么你75%的答案都是无用的，要么你需要理解如何定义一个正确的答案。这可能是正确的，尽管你可能不明白。是的，谢谢，我刚刚接受了一个我从未接受过的老答案，因为我不明白。不过，我其余的回答都是无用的。另外，谢谢你的回答。它现在可以工作了。在我看来，这是一个比公认的更好的答案，它可以应用于同一组中的多个元素，而不仅仅是每个函数调用一个元素。

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;
    });
}
    };

#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;
}