jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换_jquery

已经有两年多没登陆csdn账号了，中间做了些旁的事，可是现在却还是回归程序，但改做前端了，虽然很多东西都已忘得差不多了，但还是应该摆正心态，慢慢来，在前端漫游，做一只快乐双鱼。
路是一步一步走出来的，知识是一点一滴积累的，记录是笔财富，来吧，一起学着总结做笔记。

这几天在写后台文章的一些页面，为了能得到更好的交互性，需要做一些效果，js无疑使不二之选，但由于浏览器的兼容性一直差强人意，所以选用jquery框架，通过css样式、dom节点以及自身所带函数就可以实现比较好的用户体验，此案例有三个功能点。分别为：

1.利用jquery自身的toggle（）函数实现层的隐藏与显示动画;
2.仿新浪、腾讯微博输入框字符动态递减效果（可作为单独的js，引入即可通用）;
3.实现几个导航按钮切换不同的内容，类似tab;

以下为所有代码：

复制代码 代码如下:

<script> <BR>/*控制文章字数输入函数*/ <BR>$(function(){ <BR>$("td span").addClass('textCount');//页面加载时为所有span标签添加新浪字体样式 <BR>}) <BR>/* <BR>words_deal函数是一个可以通用的关于仿新浪字符输入的函数，用在网站的文章编辑上可以提高用户的交互性 <BR>dom：当前要操作的对象 <BR>num：限制字符数量 <BR>id:通过传入id值动态添加需要操作的span <BR>*/ <BR>function words_deal(dom,num,id) <BR>{ <BR>var curLength=$(dom).val().length; //获取文本框中输入的文字总数量 <BR>if(curLength>num)//判断是否大于限制字符数量 <BR>{ //如果大于限制级字符数量，获得从0到该限制数量的所有字符串 <BR>var totalNum=$(dom).val().substr(0,num); <BR>$(dom).val(totalNum); //将这些字符重新载入文本框，并弹框提示 <BR>alert("超过字数限制，多出的字将被截断！" ); <BR>} <BR>else <BR>{ <BR>if(curLength>num-10) <BR>{//如果输入字符为倒数10个字符时改变样式将字体变红 <BR>$('.textCount_'+id).addClass("textAfter"); <BR>} <BR>else <BR>{//否则移除样式 <BR>$('.textCount_'+id).removeClass("textAfter"); <BR>} <BR>$(".textCount_"+id).text(num-$(dom).val().length); //如小于限制级字符数量,进行累加计数显示 <BR>} <BR>} <BR>//文章列表菜单栏效果控制函数 <BR>function fun_search(dom,id){ <BR>//控制搜索层显示或隐藏 <BR>if(id!=1){ <BR>$(".article_search").toggle("fast",function(){ <BR>}); <BR>} <BR>//控制切换样式 <BR>var className = $(dom).attr("class"); <BR>if(className != 'on'){ <BR>$('.search_table a').removeClass('on'); <BR>$(dom).addClass('on'); <BR>} <BR>} <BR></script>

添加文章
高级设置
搜索

添加时间：
-


--- 全部栏目 ---

--- ${list.name} ---

 

--- 查询条件 ---
---    ID    ---
---   标题   ---
---   简介   ---
---  发布人  ---
 

* 栏目

--- 全部栏目 ---

* 标题

剩余40个字

缩略图:

自定义属性

首页头条推荐
首页焦点图推荐
视频首页每日热点
视频首页头条推荐
视频首页焦点图
首页图片推荐

栏目首页推荐
视频栏目精彩推荐
网站顶部推荐

TAG标签

  (','号分开，单个标签小于12字节)

附加选项	提取第一个图片为缩略图      图片是否加水印
分页选项	手动 (分页符为： #p#分页标题#e# )    自动 大小:   K
评论选项	允许评论      禁止评论
* 标题	剩余20个字
文章排序	默认排序 置顶一周 置顶一月 置顶一年

<script> <BR>//切换界面 <BR>function toOpen(dom,id){ <BR>var className = $(dom).attr("class"); <BR>if(className != 'on'){ <BR>$('table[id^=table_]').hide(); <BR>$('.mainnav_title ul a').removeClass('on'); <BR>$('#table_'+id).show(); <BR>$(dom).addClass('on'); <BR>} <BR>} <BR>//文章列表菜单栏效果控制函数 <BR>function fun_search(dom,id){ <BR>//控制搜索层显示或隐藏 <BR>if(id!=1){ <BR>$(".article_search").toggle("fast",function(){ <BR>}); <BR>} <BR>//控制切换样式 <BR>var className = $(dom).attr("class"); <BR>if(className != 'on'){ <BR>$('.search_table a').removeClass('on'); <BR>$(dom).addClass('on'); <BR>} <BR>} <BR></script>

以下是运行的效果图：
 
ps：代码规范很重要，养成加注释的好习惯。