使用jQuery slideToggle在动画中犹豫不决

Question

我正在尝试在包含文本的DIV上做一个简单的jQuery slideToggle()，并且发现动画非常缓慢（似乎犹豫不决），因为slideDown动画接近滑动DIV的底部

可以找到here的代码和示例。我已经在几台计算机和流行浏览器的所有现代版本上进行了测试，所有这些都表现得一样。奇怪的是，当我在jsFiddle中运行完全相同的页面时，它很顺利。

有什么想法吗？

更新

其中一部分似乎就像其他人建议的那样，jQuery在动画运行之前不知道滑动DIV的高度。由于滑动DIV中的内容将是动态的，或者非常短或稍长，所以我也没有。所以，我尝试在使用jQuery隐藏它之前抓住DIV的高度，然后相应地设置CSS高度。制作一个更平滑的动画，但可能不是最好的解决方案 - demo

更新2

问题似乎是由于初始示例中的几个CSS问题。首先，DIV太多了。其次，滑动DIV有填充设置 - 效果不佳 使用toggleSlide，最后，滑动DIV位于容器DIV中，该容器也包含#control-container（按钮）DIV。

将DIV减少到两个（滑动元素的外部DIV和滑动DIV本身）并且不设置外部滑动DIV填充似乎可以解决问题 - final example。

Answer 1

Blatant Karmaw * * * g以防万一我在正确的轨道上;）

---

我现在正在使用我的iPhone，因此我无法验证我的假设 - 但在使用padding和/或margin属性和{{1}设置元素动画之前，我遇到了类似的怪癖}。

在这些情况下，jQuery似乎很难确定动画之前的实际高度。

尝试将实际内容包装到容器div中和/或赋予其固定高度以查看动画是否顺畅运行。

---

编辑1：

我记得使用的另一种解决方法：

• 不要通过CSS隐藏元素
• 在domready上，通过jQuery确定元素的高度，并通过height:auto将其分配给元素，然后将元素的data()设置为height和0
• 使用前面保存的高度overflow:hidden而不是slideToggle()。

很难看，但是诀窍。

---

编辑2 ：

相关问题（和解决方法）are described here

---

编辑3 ：

this fiddle对你有用吗？使用填充添加容器 - 原谅糟糕的格式，jsfiddle在iPhone上没有乐趣。

Answer 2

jQuery Easing插件可能有所帮助。