jquery animate height弹跳

时间:2012-04-06 10:36:45

标签: jquery css height jquery-animate slide

我创建了一个脚本,动态地将内容加载到div中,每当内容使div的高度变大或变小时,它就会将高度设置为实际高度。

问题是它不仅向上/向下滑动它总是向上滑动然后向下滑动到所需的高度。

我想让它直接滑动到所需的高度而不会“弹跳”。

这是脚本的一部分: main_content.html(HTML);

main_content.css("height", "auto");
var newContentHeight = main_content.height();
loader_div.hide();
main_content.height(prevContentHeight);
main_content.fadeIn("fast", function() {
    main_content.animate({
        "height": newContentHeight
        }, 300);
    });

该脚本有效,唯一的问题是动画不会将div向上或向下滑动到所需的高度,它总是向上滑动一点然后向下滑动到所需的高度。

使用动画高度时是某种想要的动画还是有什么问题? 感谢

编辑:控制台记录newContentHeight(div的最终高度)看起来它收集了2个高度,然后动画首先转到其中一个,然后转到另一个,这就是它看起来像弹跳的原因。正在努力。

edit2:是的问题肯定存在,我清理了所有的代码,一切正常,除了我使用console.log从newContentHeight获得2个属性,它看起来像隐藏的内容div有2个高度,那2个高度是传递给.animate,这就是为什么它首先上升然后下降... 有点奇怪

2 个答案:

答案 0 :(得分:1)

我认为问题不是脚本,而是运行脚本的系统。将时间替换为慢一点

main_content.animate({
"height": newContentHeight
}, 3000);

答案 1 :(得分:1)

无法解决问题,我修改了下面的脚本,现在一切正常。 http://css-tricks.com/dynamic-page-replacing-content/ 它具有我正在寻找的精确动画(除了可以轻松实现的几个步骤)。