javascript - jQuery : Slide animation goes to far, 然后 "jumps"到合适的高度

Question

我已经看到一些关于类似问题的问题，但我还没有找到对我有意义的解决方案。问题出在 JSFiddle 上:http://jsfiddle.net/twchapman/EEXjR/2/

单击投资组合以查看行为。

我写的函数:

function changeTab(tab) {
    active = tab;
    $("#" + tab).slideDown(animspeed);
}

function change(tab) {
    if (tab == active) return;
    $("#" + active).slideUp(animspeed, function () {
        changeTab(tab);
    });
}

我只使用 Chrome，但我敢肯定你会在任何浏览器上遇到这个错误:当页面加载时，它会将内容 div 向下滑动，然后单击链接(目前只有 Portfolio 实际上有效) 将向上滑动当前的 div，然后向下滑动正确的 div。

它几乎完全按预期工作，但有一个小问题:当动画开始时，div 的高度“跳跃”，并且在动画发生时它会暂时变高，然后在完成时“跳跃”到正确的大小。

我找到的两个常见解决方案建议:1. 为已经存在的div 样式添加宽度，以及2. 在调用slide 函数时更改高度/边距参数。对我来说，第二种解决方案似乎没有必要，因为除了动画长度之外我没有提供任何选项。

我希望这只是我遗漏了什么和愚蠢，而不是我做事方式的大问题。

Answer 1

问题来自填充，它有时会使 jQuery 动画变得不稳定。 一个快速解决您的问题的方法是让您的 Js 保持不变，并为您的布局使用自然盒模型。

在你的 CSS 中只包含:

* { -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box; 
            box-sizing: border-box; }

我真的建议阅读 this Paul Irish 博客文章并将此代码包含在您的所有元素中。

这是一个工作演示:http://jsfiddle.net/gleezer/EEXjR/3/