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

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

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

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

以下为所有代码：

代码如下:

添加文章
高级设置
搜索

添加时间：
-


--- 全部栏目 ---

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



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

* 栏目	--- 全部栏目 ---
* 标题	剩余40个字
缩略图:
自定义属性	首页头条推荐 首页焦点图推荐 视频首页每日热点 视频首页头条推荐 视频首页焦点图 首页图片推荐 栏目首页推荐 视频栏目精彩推荐 网站顶部推荐
TAG标签	(','号分开，单个标签小于12字节)

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

以下是运行的效果图：

ps：代码规范很重要，养成加注释的好习惯。