jQuery插件animateToClass实现javascript自定义动画效果

使用jQuery可实现超眩的动画效果，但在实现时需要一个变量一个值的形式，如下：

1. $("#biuuu").animate({
2. "margin-left" : "40px",
3. "width" : "300px",
4. "heigth" : "150px"
5. }, 1000);

对于实现复杂的动画效果来说，变量和值创建动画代码就会特别多，严重影响代码阅读，不利于动画效果的后期维护，jQuery插件animateToClass只要定义CSS样式，通过样式名做为变量可直接将所需效果定义于动画，如下：

1. $("#biuuu").animateToClass("bar", 1000);

不需要维护大量的JS代码，只需要定义好CSS样式，非常简单，下面做了一个简单的实例，

一，包含文件部分
<script src="jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="jquery.animateToClass.js" type="text/javascript"></script>

二，CSS样式定义，定义所需展示动画的效果样式，如下几个样式

1. <style>
2. #animation1{
3. position:relative;
4. float:left;
5. width:15px;
6. height:15px;
7. background:#900;
8. }
9. .a1_class1{ width:50px; height:50px; }
10. .a1_class2{ width:500px; }
11. .a1_class3{ height:15px; }
12. .a1_class4{ width:15px; }
13. </style>

三，Javascript部分(调用jQuery插件animateToClass)

1. <script>
2. $(document).ready(function(){
3. $("#button").click(function(){
4. $("#animation1").animateToClass("a1_class1", 1000).animateToClass("a1_class2", 1000).animateToClass("a1_class3", 1000).animateToClass("a1_class4", 1000);
5. });
6. });
7. </script>

四，HTML部分

1. <button id="button">动画展示</button>
2. <div id="animation1" style="width: 15px; display: block; height: 15px;"></div>

点击按钮触发播放动画事件，animateToClass插件分别调用a1_class1，a1_class2，a1_class3，a1_class4四个CSS样式，分别产生不同的动画效果，使用非常简单。具体可下载演示或在线查看。