jquery操作動畫顯示與隱藏效果效果

這次帶給大家jquery操作動畫顯示與隱藏效果效果，jquery操作動畫顯示與隱藏的注意事項有哪些，下面就是實戰案例，一起來看一下。

這幾天在寫後台文章的一些頁面，為了能得到更好的互動性，需要做一些效果，js無疑使不二之選，但由於瀏覽器的兼容性一直差強人意，所以選用jquery框架，透過css樣式、dom節點以及自身所帶函數就可以實現比較好的使用者體驗，此案例有三個功能點。分別為：
1.利用jquery自身的toggle（）函數實現層的隱藏與顯示動畫;
2.仿新浪、騰訊微博輸入框字符動態遞減效果（可作為單獨的js，引入即可通用）;
3.實作幾個導航按鈕切換不同的內容，類似tab;
以下為所有程式碼：

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> 

以下是執行的效果圖：
 

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jQuery實作某入口網站導覽頁圖片拖曳排序

jQuery實作省份城市滑動切換（附程式碼）

以上是jquery操作動畫顯示與隱藏效果效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！