如何解决糟糕的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上运行标准动画（），例如$("div").animate({ height:'0px' )})，您会发现动画只是固定在设定的最小高度。

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

不幸的是没有身高/宽度

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

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

您可能遇到由于您尝试设置动画的元素的填充/边距或其中的任何元素的折叠导致的不稳定动画问题。这是一个简单的问题，通过向您动画的元素添加border: 1px solid transparent;来解决。这会创建一个jQuery的边界，以便它实际上忽略了折叠填充/边距。