使用停止的jQuery动画问题答案

【问题标题】：jquery animation problem using stop使用停止的jQuery动画问题
【发布时间】：2010-12-25 22:51:51
【问题描述】：

当运行像 slideDown() 这样的 Jquery 动画时，看起来许多特定于元素的 css 属性被设置为以特定间隔更新，并且当动画完成时，这些属性被取消设置并且显示属性被简单地设置自动或其他。至少在 firebug 中你再也看不到那些临时属性了。

我遇到的问题是我们使用 stop() 停止向下滑动的场景。然后该元素将保留当前的临时 css 值。这很好，因为它必须这样做，但是让我们说我停止了向下滑动，因为我决定过早地将它再次向上滑动。它看起来像这样：

$(this).slideDown(2000)
//The below events is not in queue but will rather start execute almost 
simultaneously as the above line. (dont remember the exact syntax)
$(this).delay(1000).stop().slideUp(2000)

上面的代码可能意义不大，但重点是：
向下滑动 1 秒后，动画停止并开始向上滑动。像魅力一样工作。

但是！！！这就是问题所在。一旦它向后滑动，元素 css 属性将重置为它在 slideDown() 动画中 1000 毫秒的确切值（当调用 stop() 时）。如果我们现在尝试运行以下命令：

$(this).slideDown(2000)

它将向下滑动到先前的 slideDown 被中止的点，并且不会以一半的速度进一步滑动（因为它在大约一半的高度上使用相同的时间）。这是因为我看到的 css 属性被保存了。但这并不是特别希望的。这次我当然希望它一直滑下去。

由于难以预测的 UI 交互，一切可能很快就会中断。我们使用的动画越长，发生这种情况的风险就会越大。

这是一个错误，还是我做错了什么？或者可能只是一个不支持的功能？

我想我可以使用回调函数来重置 css 属性，但是根据使用的动画，使用不同的 css 属性来渲染它，并且遮住你的背部会导致一个不那么花哨的解决方案。

【问题讨论】：

标签： javascript jquery jquery-animate jquery-effects

【解决方案1】：

您可以尝试将slideUp 和slideDown 替换为animate。

http://api.jquery.com/animate/

这样，你就明确地告诉它要做什么。

【讨论】：

是的，这可能是我必须做的。它会给我足够的控制。但我仍然很好奇这是否是预期的行为。
顺便说一句。如何计算要向下滑动的元素的高度？在具有 display: none 的对象上计算它不会给你一个正确的值。

【解决方案2】：

这是预期的（虽然不是理想的）行为...要让.slideDown() 达到全高，使用.stop(true, true) 从完成的位置开始幻灯片，这样动画就完成了。第二个true 参数，告诉它跳到动画的结尾是这里的重要部分，所以它滑回的那些“最终”值是全高，等等......而不是它当时的高度它停止滑动。

【讨论】：

是的，但这看起来很奇怪，因为它会在滑回之前进行奇怪的跳跃。

【解决方案3】：

这是一个已在 jQuery 1.7.2 中修复的错误：http://bugs.jquery.com/ticket/8685

【讨论】：