使用stop的jquery动画问题

发布于 2024-10-09 08:14:43 字数 982 浏览 3 评论 0原文

当运行像slideDown()这样的Jquery动画时，看起来许多特定于元素的CSS属性被设置为以特定的时间间隔更新，并且当动画完成时，这些属性被取消设置，并且显示属性被简单地设置为auto或任何。至少在 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 属性来渲染它，并且覆盖你的背部会导致相当不那么花哨的解决方案。

原文

When running a Jquery animation like slideDown(), it looks like a number of element-specific css properties is set to be updated at a specific interval and when the animation is complete these properties are unset and the display property is simply set to auto or whatever. At least in firebug you can't see those temporary properties any more.

The problem I've encountered is the scenario where we stop the slide down with stop(). The element is then left with the current temporary css values. Which is fine because it has to, but let us say that I stoped the slidedown because I have decided to slide it back up again a bit prematurely. It would look something like this:

$(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)

The above code might not make much sense, but the point is:
After 1 second of sliding down the animation is stopped and it starts to slide back up. Works like a charm.

BUT!!! And here is the problem. Once it it has slid back up the elements css properties are reset to the exact values it had 1000ms into the slideDown() animation (when stop() was called). If we now try to run the following:

$(this).slideDown(2000)

It will slide down to the very point the prior slideDown was aborted and not further at half the speed (since it uses the same time for approximately half the height). This is because the css properties were saved as I see it. But it is not especially wished for. Of course I want it to slide all the way down this time.

Due to UI interaction that is hard to predict everything might soon break. The longer animations we use increases the risk of something like this happening.

Is this to be considered a bug, or am I doing something wrong? Or maybe it's just a feature that is not supported?

I guess I can use a callback function to reset the css properties, but depending on the animation used, different css properties are used to render it, and covering your back would result in quite a not-so-fancy solution.

分享到QQ

分享到微博