jquery operation animation display and hidden effects

This time I will bring you the jquery operation animation display and hiding effects. What are the precautions for jquery operation animation display and hiding? . The following is a practical case, let's take a look.

In the past few days, I have been writing some pages of background articles. In order to get better interactivity, some effects need to be done. js is undoubtedly the best choice, but because the compatibility of browsers has always been unsatisfactory, so Using the jquery framework, you can achieve a better user experience through css styles, dom nodes and its own functions. This case has three functional points. They are:
1. Use jquery's own toggle() function to realize the hiding and display animation of the layer;
2. Imitate the dynamic decrement effect of characters in the input box of Sina and Tencent Weibo (can be used as a separate js, introduced i.e. Universal);
3. Implement several navigation buttons to switch different content, similar to tab;
The following is all the code:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
<meta> 
<title>用jquery实现两个table的显示与隐藏</title> 
<script> </script> 
<style> 
/*整体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;} 
</style> 
<script> 
/*控制文章字数输入函数*/ 
$(function(){ 
$("td span").addClass(&#39;textCount&#39;);//页面加载时为所有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个字符时改变样式将字体变红 
$(&#39;.textCount_&#39;+id).addClass("textAfter"); 
} 
else 
{//否则移除样式 
$(&#39;.textCount_&#39;+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 != &#39;on&#39;){ 
$(&#39;.search_table a&#39;).removeClass(&#39;on&#39;); 
$(dom).addClass(&#39;on&#39;); 
} 
} 
</script> 
 
 
<!--包含层start--> 
<p> 
<!--导航栏strat--> 
</p><p> 
</p>

  添加文章  高级设置  搜索 

       

 

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

                                                 

* 栏目

    --- 全部栏目 ---         

* 标题

  剩余40个字
 

缩略图:

         

自定义属性 

   首页头条推荐   首页焦点图推荐   视频首页每日热点   视频首页头条推荐   视频首页焦点图   首页图片推荐
   栏目首页推荐   视频栏目精彩推荐   网站顶部推荐 

TAG标签

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

                                             

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

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

The following is the rendering of the operation:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jQuery implements drag sorting of pictures on the navigation page of a portal website

jQuery implements sliding switching of provinces and cities (with code )

The above is the detailed content of jquery operation animation display and hidden effects. For more information, please follow other related articles on the PHP Chinese website!