平滑更改CSS

Question

我的情况如下：

我具有以下功能

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。 “主” div应降低/增加其高度。这样做，但是我需要知道是否有一种方法可以顺利进行此操作。

谢谢。

Answer 1

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

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

示例（加载了jQuery UI）：

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

另外，请按您的接受率进行工作。

Answer 2

您可以使用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％。

使用CSS而不是jQuery的动画功能的优势在于，当支持CSS转换时，CSS转换是硬件加速的，并且将更加平滑和高效。缺点是某些过时的浏览器版本将不支持该效果，但是它会退回到非动画的高度变化，而不是折断。

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

MDN article on transitions.

Here is a jsfiddle example.

Answer 3

您可以为此使用动画：

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

Answer 4

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

Answer 5

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