顺利改变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

您可以使用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%.

使用CSS而不是jQuery的animate函数的优点是CSS转换在支持时是硬件加速的,并且将更加平滑和高效.缺点是一些过时的浏览器版本不支持这种效果,但它只会回归到非动画高度变化,而不是破坏.

要了解有关CSS过渡的更多信息,请按照以下链接访问Mozilla的文章.它们是这类事物的绝佳参考,也是开始学习,甚至了解你的知识的好地方.我还在下面列举了这种技术的一个例子.

关于过渡的MDN文章.

这是一个jsfiddle的例子.

Answer 2

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

如果要使用"线性"或"摆动"以外的缓动类型,请包括jquery ui.它作为第二个参数(字符串)传递给animate方法.http://jqueryui.com/demos/effect/easing.html

示例(加载了jquery ui):

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

此外,你的接受率工作.