jquery操作动画显示与隐藏效果效果

这次给大家带来jquery操作动画显示与隐藏效果效果，jquery操作动画显示与隐藏的注意事项有哪些，下面就是实战案例，一起来看一下。

这几天在写后台文章的一些页面，为了能得到更好的交互性，需要做一些效果，js无疑使不二之选，但由于浏览器的兼容性一直差强人意，所以选用jquery框架，通过css样式、dom节点以及自身所带函数就可以实现比较好的用户体验，此案例有三个功能点。分别为：
1.利用jquery自身的toggle（）函数实现层的隐藏与显示动画;
2.仿新浪、腾讯微博输入框字符动态递减效果（可作为单独的js，引入即可通用）;
3.实现几个导航按钮切换不同的内容，类似tab;
以下为所有代码：

        /*整体table样式*/ .mainbox {margin:5px 10px;overflow:hidden;zoom:1;_margin:5px;} .mainnav_title {line-height:40px;height:40px;border-bottom:1px solid #eee;color:#ddd;} .mainnav_title a {color:#004499;margin:0 5px;padding:4px 7px;background:#EFEFEF;} .mainnav_title a:hover ,.mainnav_title a.on{background:#498CD0;color:#FFF;} .table_form td{padding-left:12px} .table_form th span{color:#FF0000} .table_form th{font-weight:normal; text-align:right;padding-right:10px; color:#777} .table_form td label{ vertical-align:middle} .table_form td , .table_form th{padding:8px 0 5px 8px;line-height:22px;} .table_form tbody td,.table_form tbody th{border-bottom:1px solid #eee; } .colorpanel tbody td,.colorpanel tbody th{ padding:0;border-bottom: none;} /*控制文章字数输入样式*/ .textAfter{font-weight: 700;font-size: 22px;font-style: italic;color:#FF0000;font-family: Constantia, Georgia;} .textCount{font-weight: 700;font-size: 22px;font-style: italic;font-family: Constantia, Georgia;} /*文章列表页面样式*/ .article_search{border:1px solid #FFCC33; background-color:#FFFFCC;height:46px;margin:10px 0px 10px 0px;line-height:46px;padding:0px 15px 0px 15px;} .advsetup{background-color:red; height:57px;line-height:57px;} .search_table a:hover ,.search_table a.on{background:#498CD0;color:#FFF;} .search_table a{margin:5px;padding:5px;height:15px;line-height:15px;} .search a{color:#004499;margin:0 5px;padding:4px 7px;background:#EFEFEF;}   /*控制文章字数输入函数*/ $(function(){ $("td span").addClass('textCount');//页面加载时为所有span标签添加新浪字体样式 }) /* words_deal函数是一个可以通用的关于仿新浪字符输入的函数，用在网站的文章编辑上可以提高用户的交互性 dom：当前要操作的对象 num：限制字符数量 id:通过传入id值动态添加需要操作的span */ function words_deal(dom,num,id) { var curLength=$(dom).val().length; //获取文本框中输入的文字总数量 if(curLength>num)//判断是否大于限制字符数量 { //如果大于限制级字符数量，获得从0到该限制数量的所有字符串 var totalNum=$(dom).val().substr(0,num); $(dom).val(totalNum); //将这些字符重新载入文本框，并弹框提示 alert("超过字数限制，多出的字将被截断！" ); } else { if(curLength>num-10) {//如果输入字符为倒数10个字符时改变样式将字体变红 $('.textCount_'+id).addClass("textAfter"); } else {//否则移除样式 $('.textCount_'+id).removeClass("textAfter"); } $(".textCount_"+id).text(num-$(dom).val().length); //如小于限制级字符数量,进行累加计数显示 } } //文章列表菜单栏效果控制函数 function fun_search(dom,id){ //控制搜索层显示或隐藏 if(id!=1){ $(".article_search").toggle("fast",function(){ }); } //控制切换样式 var className = $(dom).attr("class"); if(className != 'on'){ $('.search_table a').removeClass('on'); $(dom).addClass('on'); } }     
  
 

添加文章 高级设置 搜索

添加时间： --- 全部栏目 --- --- ${list.name} --- --- 查询条件 --- --- ID --- --- 标题 --- --- 简介 --- --- 发布人 ---

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

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

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

登录后复制

以下是运行的效果图：
 

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

jQuery实现某门户网站导航页图片拖动排序

jQuery实现省份城市滑动切换（附代码）

以上就是jquery操作动画显示与隐藏效果效果的详细内容，更多请关注【创想鸟】其它相关文章！