2

我的情况如下：

我有以下功能

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 应该减少/增加它的高度。它确实如此，但我需要知道是否有办法顺利地做到这一点。

对此表示感谢。

4

5 回答 5

8

您可以使用 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属性定义了转换的功能。Ease 将缓慢加速到 50% 过渡，然后减速到 100%。

使用 CSS 优于 jQuery 的 animate 函数的优点是 CSS 转换在支持时是硬件加速的，并且会更流畅和更高效。缺点是一些过时的浏览器版本不支持这种效果，但是它会简单地退回到非动画的高度变化，而不是破坏。

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

MDN 关于转换的文章。

这是一个jsfiddle示例。

于 2012-06-11T12:00:06.200 回答
6

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

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

示例（加载了 jquery ui）：

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

另外，努力提高你的接受率。

于 2012-06-11T11:46:04.343 回答
0

您可以为此使用动画：

var oldHeight = $("#main").height();
$("#main").animate({'height', oldHeight + 187}, { duration: 500, queue: false });
于 2012-06-11T11:48:13.113 回答
0

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

于 2012-06-11T11:48:37.643 回答
0

使用动画（）...

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;
    });
}
    };
于 2012-06-11T11:51:15.727 回答