1

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

可以在此处找到代码和示例。我已经在多台计算机和流行浏览器的所有现代版本上进行了测试，它们的行为方式都相同。奇怪的是，当我在jsFiddle中运行完全相同的页面时，它很流畅。

有任何想法吗？

更新

部分原因似乎是，就像其他人建议的那样，jQuery 在动画运行之前不知道滑动 DIV 的高度。由于滑动 DIV 中的内容是动态的，要么很短，要么有点长，我也不会。所以，我尝试在使用 jQuery 隐藏它之前抓取 DIV 的高度，然后相应地设置 CSS 高度。制作更流畅的动画，但可能不是最佳解决方案 -演示

更新 2

问题似乎是由于初始示例中的几个 CSS 问题造成的。首先，DIV 太多。其次，滑动 DIV 设置了填充 - 不能很好地与 一起使用toggleSlide，最后，滑动 DIV 位于还包含#control-container（按钮）DIV 的容器 DIV 中。

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

4

2 回答 2

3

公然的 Karmaw* * *g 以防万一我走在正确的轨道上；）

我现在在我的 iPhone 上，所以我无法验证我的假设 - 但我之前在使用padding和/或margin属性设置动画元素时遇到过类似的怪癖和height:auto.

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

尝试将您的实际内容包装到一个容器 div 中和/或给它一个固定的高度，以查看动画是否顺利运行。

编辑1：

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

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

丑陋，但确实有效。

编辑 2：

此处描述了一个相关问题（和解决方法）

编辑 3：

这个小提琴对你有用吗？添加了带填充的容器 - 请原谅格式错误，jsfiddle 在 iPhone 上不好玩。

于 2012-03-21T23:25:08.940 回答
-1

jQuery Easing 插件可能会有所帮助。

于 2012-03-21T23:20:21.617 回答