jQuery:幻灯片动画走得很远，然后“跳”到正确的高度

jQuery: Slide animation goes to far, then "jumps" to the right height

本文关键字：高度 然后 动画 幻灯片 很远 jQuery      更新时间：2023-09-26

我已经看到了一些关于类似问题的问题，但我还没有找到对我来说有意义的解决方案。问题出在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.在调用滑动函数时更改其高度/边距参数。对我来说，第二种解决方案似乎没有必要，因为我除了动画长度之外没有提供任何选项。

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

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

在你的css中，只需包括：

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

我真的建议阅读这篇保罗爱尔兰博客文章，并将此代码包含在您的所有项目中。

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

更新你的 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);
    }
}
相关文章：