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

或许使用这个JavaScript库也可以达到自定义动画的功能：
[url]http://raphaeljs.com/[/url]


出自：[url]http://www.biuuu.com/p656.html[/url]
使用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样式，分别产生不同的动画效果，使用非常简单。具体可下载演示或在线查看。

[url=http://plugins.jquery.com/project/animate-to-class]jQuery插件animateToClass下载[/url]

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);