0

我已经看到了一些关于类似问题的问题，但我还没有找到对我有意义的解决方案。问题出在 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 的高度“跳跃”，并且在动画发生时它会瞬间变高，然后在完成时“跳跃”到正确的大小。

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

我希望这只是我错过了一些东西并且很傻，而不是我做事方式的大问题。

4

2 回答 2

0

更新你的 js。

function change(tab) {
    if(tab == active) return false;
    console.log(tab);
    console.log(active);
    if($("#" + active).length){   //check element is exists.
       $("#" + active).slideUp(animspeed, function() {changeTab(tab)})
    }else{
    changeTab(tab);
    }

}
于 2013-01-25T01:25:54.577 回答
0

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

在你的CSS中只包括：

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

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

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

于 2013-01-25T03:14:48.933 回答