jQuery插件animateToClass实现javascript自定义动画效果
或许使用这个JavaScript库也可以达到自定义动画的功能：http://raphaeljs.com/
出自：http://www.biuuu.com/p656.html
使用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样式，非常简单，下面做了一个简单的实例，
animatetoclass
animatetoclass2
一，包含文件部分
<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样式，分别产生不同的动画效果，使用非常简单。具体可下载演示或在线查看。
jQuery插件animateToClass下载
jQuery插件animateToClass在线演示
http://igorvieira.com/projects/animate-to-class/
jQuery插件animateToClass实现javascript自定义动画效果 DEMO
/* * jQuery Animate To Class * Copyright 2008 Igor Frias Vieira * http://igorvieira.com/blog/animate-to-class/ * * Released under the MIT and GPL licenses. */(function($){$.fn.extend({animateToClass : function(to, duration, easing, callback){if(!to){ return this; }styles = selectStyle(to);if(!styles) return this;return this.animate(styles, duration, easing, callback);}});function selectStyle(sel){if(sel.substr(0,1) != "."){sel = "." + sel;}for(var cont = 0; cont < document.styleSheets.length; cont++){v = document.styleSheets;attrClass = selectAttr(sel, v);if(attrClass != false){break;}}if(!attrClass){attrClass = Array();}objStyle = {}if(attrClass == ""){return false;}if(attrClass.match(";")){attrClass = attrClass.split(";");}else{attrClass = ;}$(attrClass).each(function(i,v){if(v != ""){v = v.split(":");v = toCamelCase(v);objStyle] = $.trim(v);}});return objStyle;}function selectAttr(sel, v){attrClass = false;if($.browser.msie){if(v.rules.length > 0){$(v.rules).each(function(i2,v2){if(sel == v2.selectorText){attrClass = v2.style.cssText;}});}else if(v.imports.length > 0){$(v.imports).each(function(i2,v2){ if(sel == v2.selectorText){attrClass = v2.style.cssText;}else if(v2 == "" || v2 == "" || v2 == ""){return selectAttr(sel, v2);}});}}else{$(v.cssRules).each(function(i2,v2){if(sel == v2.selectorText){attrClass = v2.style.cssText;}else if(v2 == ""){return selectAttr(sel, v2.styleSheet);}});}return attrClass;}function toCamelCase(str){str = $.trim(str);str = str.replace(/-/g, " ");str = str.toLowerCase();strArr = str.split(" ");var nStr = "";$(strArr).each(function(i,v){if(i == 0){nStr += v;}else{/*v = v.split("");v = v.toUpperCase();nStr += v.join();*///There was a bug in older version, this correction was sugested by Simon Shepard.nStr += v.substr(0,1).toUpperCase();nStr += v.substr(1,v.length);}});return nStr;}})(jQuery);
页:
[1]