rails应用ajax之三:进一步完善ajax动画特效果

本猫已经对界面放低标准很久了，但是复习了ajax之后突然发现：哇！原来世界可以这么美，这么生动鲜活的！所以本篇主要讨论下如何用ajax在rails中做一些简单的动画效果。

其实最新版的的rails中使用的是coffeescript，它也是对js的高级封装，使其更贴近于ruby简洁灵动的语法。coffeescript暂时不校习鸟，以后补上吧！在rails旧版本中使用的js框架是prototype，其自带一个effects.js图像效果库。比如说我想在每次新插入user时将整ul元素背景短暂高亮，用prototype可以这样写：

new Effect.Highlight('users');
new Insertion.Bottom('users','<%= escape_javascript(render @user)%>');

高版本的rails自身已不带prototype鸟，需要安装prototype-rails gem然后将几个js文件拷贝到/public/javascripts目录下，然后在视图文件中包含js文件即可：

<%= javascript_include_tag 'prototype','effects' %>

这里可以看到prototype的一些api的使用帮助：

http://thinhunan.cnblogs.com/archive/2006/04/01/DeveloperNotesForPrototype.html

我们知道js的另一个不错的框架是jQuery，它和prototype一般是不可以混用的。所以下面讲一下如何用jquery做出类似上面prototype的效果。比如说我想让每个新插入的user（2行包括name和age）都在插入时有短暂的高亮效果，用jquery可以这样写：

$("<%= escape_javascript(render @user)%>").hide().css("background-color","yellow").appendTo("#users");
var color = $("#users li:first").css("background-color")
$("#users li:eq(-1),li:eq(-2)").fadeIn("slow",function(){
	//var color = $(this).css("background-color");
	var _this = this;
	//$(this).css("background-color","yellow");
	
	setTimeout(function(){
		$(_this).css("background-color",color);
	},500);
});

当然你不能包含prototype和effects了，你需要包含jquery：

<%= javascript_include_tag 'jquery' %>

值得说明的是在jquery中延时执行有2种方法一种是向上面代码中用js的函数setTimeout，不过在此函数的上下文中this的值会变，所以必须事先保存你需要的值，这也是我var _this = this;代码的用意。还有一种延时方法是用jquery中的函数delay，不过该函数是异步调用的，而且在上述情况下不能达到偶的要求，所以用的是setTimeout的方法。jquery的api帮助可以看：http://www.w3school.com.cn/jquery/index.asp

另外说一下，在调试html代码时用firefox的调试功能那时相当的酸爽哦，大家可以尝试下。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!