使用jQuery管理复杂的动画

我需要在我的网站上完成相当复杂的动画，元素上下滑动，CSS属性被操纵等等。我想知道如何以优雅的方式做到这一点。使用jQuery管理复杂的动画

动作触发onclick，另一次点击应该恢复一切，直到网站再次处于其原始状态。

我不想做的就是写这样

功能

$(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的队列（） - 功能，但有一点我卡住：

一旦定制队列离队它不存在任何更多，这意味着我可以一次动画的元素，但我可以例如，说：

myQueue.queue（'animate'）。reverse（）;

myQueue被触发后，因为此时它是空的。

这个冗长的解释不仅仅是针对这个简单的队列问题。这也是一个邀请建议更好的方法来实现这一点。

来源

2011-08-05 Chrisissorry

我会去面向对象的方法。看看这篇博文：http://ryanflorence.com/authoring-jquery-plugins-with-object-oriented-javascript/ –

我不认为有一个开箱即用的解决方案。动画并不知道它们的反转操作，因此恢复它们是一件不平凡的任务。也就是说，自己写这样一个系统不应该都很复杂。毕竟每个动画都非常简单，倒序操作应该很容易生成。

来源

2011-08-05 11:09:35

使用jQuery管理复杂的动画

回答

相关问题