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[cont];
			
			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];
		}
		
		$(attrClass).each(function(i,v){
			if(v != ""){
				v = v.split(":");
				v[0] = toCamelCase(v[0]);
				
				objStyle[v[0]] = $.trim(v[1]);	
				
			}
		});
		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 == "[object]" || v2 == "[Object CSSStyleSheet]" || v2 == "[object CSSImportRule]")
					{
						return selectAttr(sel, v2);
					}
				});
			}
		}
		else
		{
			$(v.cssRules).each(function(i2,v2){
				if(sel == v2.selectorText)
				{
					attrClass = v2.style.cssText;
				}
				else if(v2 == "[object CSSImportRule]")
				{
					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[0] = v[0].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);