jquery 작업 애니메이션 표시 및 숨겨진 효과

이번에는 jquery 연산 애니메이션 표시 및 숨기기 효과를 가져오겠습니다. jquery 연산 애니메이션 표시 및 숨기기에 대한 주의사항은 무엇인가요?

지난 며칠 동안 더 나은 상호작용성을 얻기 위해 일부 효과를 작성해야 했습니다. 의심할 여지 없이 최선의 선택이지만 브라우저의 호환성이 항상 만족스럽지 않았기 때문입니다. 저는 jquery 프레임워크를 선택했습니다. CSS 스타일, DOM 노드 및 자체 기능을 통해 더 나은 사용자 경험을 얻을 수 있습니다. 이 경우에는 세 가지 기능적 포인트가 있습니다.
1. jquery의 자체 토글() 기능을 사용하여 레이어 숨기기 및 표시 애니메이션을 구현합니다.
2. Sina 및 Tencent Weibo의 입력 상자에서 문자의 동적 감소 효과를 모방합니다(별도의 js로 사용할 수 있음).
3. 탭과 유사하게 여러 개의 탐색 버튼을 구현합니다.
다음은 전체 코드입니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!