暂停和恢复 JQuery.animated 对象
我在尝试暂停和恢复 JQuery.animated 对象时遇到麻烦,它暂停得很好,但是一旦恢复动画,它就会从当前位置重置动画,因此它最终会移过原本要停止的位置。
这是一个 jsFiddle: jsFiddle 来帮助更好地解释它。
谢谢你的帮助。
I'm having trouble in trying to pause and resume a JQuery.animated object, it pauses fine but once it resumes animation it resets the animation from its current position so it ends up moving past the spot where it was meant to stop.
Heres a jsFiddle: jsFiddle to help explain it better.
Thanks for you help.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这是您想要实现的目标吗?
我只是使用了来自@DarthJDG的建议,还添加了元素的高度,使其不会低于窗口边框。
http://jsfiddle.net/HemUe/2/
Is this what you were trying to achieve?
I was just using the suggestions from @DarthJDG, also added the element's height so it doesn't go below the window border.
http://jsfiddle.net/HemUe/2/
问题是您正在使用相对动画目标。据我所知,该插件仅在重新启动动画时考虑经过的时间,属性保持不变。
因此,如果您启动线性动画 5 秒以将元素移动 +100px,并在 2 秒后暂停动画,则它已经移动了 40px。当动画恢复时,它将开始一个移动+100px的动画,持续3秒,元素最终总共移动140px。
解决方案是在调用
$box.animate()
时使用绝对值,然后在必要时将相对值转换为绝对值。不要移动"+="+windowHeight
,而是将其设置为$box.position().top + windowHeight
。您可能想向插件的开发人员报告此错误/限制,但由于插件的版本只有 0.1,他可能很清楚。
The problem is that you're using relative animation targets. As far as I can tell, the plugin only takes the time elapsed into account when restarting the animation, the properties remain the same.
So if you start a linear animation for 5 seconds to move an element +100px and pause the animation after 2 seconds, it has already moved 40px. When the animation resumes, it will start an animation to move +100px for 3 seconds, and the element ends up moving 140px in total.
The solution is to use absolute values when calling
$box.animate()
, converting relative values to absolute there and then if necessary. Instead of moving"+="+windowHeight
, set it to$box.position().top + windowHeight
.You might want to report this bug/limitation to the plugin's developer, but as the plugin's version is only 0.1, he might be well aware.