使用 jQuery 管理复杂的动画
我需要在我的网站上完成相当复杂的动画，其中元素上下滑动、操纵 CSS 属性等等。我想知道如何以优雅的方式做到这一点。
操作会在单击时触发，再次单击应恢复所有内容，直到站点再次处于原始状态。
我不想做的是编写像
$(somebutton).onclick(function() {
if($(this).hasClass("clicked") {
$(this).slideDown();
$('#that').show();
$('#button').css("position","absolute");
// more things going on
} else {
// revert all things gone on
$(this).slideUp();
$('#that').hide();
$('#button').css("position","static");
}
});
这样的函数这意味着我不想将所有这些语句写两次，或者更糟糕的是，大多数动画 70% 都是相同的。我不想一遍又一遍地写这些。
我想到的是类似动画队列的东西，我可以操纵、弹出和移动它，最重要的是恢复它。我找到了 jQuery 的queue()-Function，但是有一点我被卡住了：
一旦自定义队列出队，它就不再存在，这意味着我可以为该元素设置动画一次，但我不能说示例
myQueue.queue('animate').reverse();
在 myQueue 被解雇后，因为此时它是空的。
这个冗长的解释不仅仅是针对这个简单的队列问题。这也是邀请大家提出更好的方法来实现这一目标的想法。
I need to accomplish fairly complex animations on my website where elements slide up and down, CSS properties are manipulated and so on. I wonder how to do this in an elegant way.
Actions fire onclick, another click should revert everything until the site is in its original state again.
What I not want to do is write a function like
$(somebutton).onclick(function() {
if($(this).hasClass("clicked") {
$(this).slideDown();
$('#that').show();
$('#button').css("position","absolute");
// more things going on
} else {
// revert all things gone on
$(this).slideUp();
$('#that').hide();
$('#button').css("position","static");
}
});
That means I do not want to write all these statements twice, or even worse, most of the animations are the same in 70 %. I did not want to write that over and over again.
What I thought of was something like an animation queue, which I can manipulate, pop and shift and most important revert. I found jQuery's queue()-Function, but there is one point I get stuck:
once the custom queue is dequeued it is not present any more, that means I can animate the element once, but I can't say for example
myQueue.queue('animate').reverse();
after myQueue was fired because it is empty at this point.
This lengthy explanation is not just for this simple queue problem. It is also an invitation to suggest ideas for a better way to accomplish that.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我认为没有现成的解决方案。动画不知道它们的反转操作，因此恢复它们是一项艰巨的任务。也就是说，自己编写这样一个系统应该不会太复杂。毕竟每个动画都非常简单，并且反转操作应该很容易生成。
I don't think there's a solution out of the box. Animations are not aware of their invert operation, so reverting them is a non-trivial task. That said it shouldn't be all to complicated to write such a system yourself. After all each animation is very simple and the inverted operation should be easily generateable.