jquery 动画高度弹跳

标签 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 这就是为什么它先上升然后下降的原因...... 有点奇怪

最佳答案

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

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

关于jquery 动画高度弹跳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10042343/

相关文章:

jquery - 什么时候应该使用 jQuery Mobile?正确的 "Use Case"是什么?

javascript - jQuery:分配多个事件处理程序是非法的还是不好的做法?

c++ - 有没有直接快速的方法将 "map"list<VectorXd> 转换为 MatrixXd?

javascript - CSS 高度 100% 无效

javascript - jQuery 防止函数在点击时重复

javascript - 如何防止 Meteor.js 模板在没有数据的情况下呈现

php - WordPress 网站上的页面内容(通过 get_template_part)显示不正确

Javascript 图像 slider 过渡

html - 显示一组带有内联标题的图像,同时保持按高度缩放

当动画元素有超过 1 行 float 子元素时,jQuery 高度动画会跳跃