javascript - 如何解决错误的 jQuery 动画

Question

最近，我正在为一个需要一些元素动画的网站模板编写代码。自然地，我决定启用我的 jQuery 并使用它的一些标准库来为我的 div 设置动画。在这种情况下，我想使用 slideUp() 函数。当我编写代码并进行试验时，我注意到动画非常不稳定，所以我决定在这里和互联网上寻找线索，结果很短。

问题Div slideUp and slideDown animation choppy with inline-block display提供了一些提示，但没有任何我最终会实际使用的提示。所以我想知道:你过去是如何处理这种情况的？我将发布一个答案，其中包含我认为有用的解决方案。

Answer 1

可怕的最小高度/最小宽度

我遇到的第一个也是最常见的错误是使用最小高度或最小宽度。如前所述here ，无论您的标准高度设置如何，它都会导致动画跳动。为什么会这样？

假设您有一个高度为 75 像素且最小高度为 50 像素的 div，并且您希望使用一些动画函数将该 div 的高度降低为零(例如 slideUp())当动画开始时，它将开始从已知的总高度中减去。当它达到设置的最小高度时，它会尝试将 div 高度设置得更低，但在 display:none 被添加到元素的样式之前，它无法坚持下去，导致假定“断断续续的动画”。它实际上并不不稳定:它正在失败。如果您要在设置了最小高度(大于 0)的 div 上运行标准 animate()，例如 $("div").animate({ height:'0px' )}) ，您会发现动画只是停留在设置的最小高度。

这个问题的解决方案是简单地在 css 中取消设置 div 的任何最小高度，或者设置 min-height: 0; 如果最小高度在别处声明。

不幸的是没有高度/宽度

另一个常见的错误是根本不设置对象的高度(或宽度，取决于动画的方向)。这可能会导致动画功能跳转，因为它需要调整的高度计算不正确。未设置的宽度/高度可能会产生不同的结果，并且可能会成功或失败，具体取决于周围的 DOM 和包含在其中的 DOM。最佳做法是在任何想要设置动画的元素上设置高度和宽度。百分比高度/宽度很好。

填充/边距血腥填充/边距

您可能会遇到动画断断续续的问题，原因是您尝试设置动画的元素或其中的任何元素的填充/边距折叠。这是一个简单的问题，通过将 border: 1px solid transparent; 添加到您正在设置动画的元素即可解决。这为 jQuery 使用创建了一个边界，因此它基本上忽略了折叠的填充/边距。