jquery 작업 애니메이션 표시 및 숨겨진 효과-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

Apr 26, 2018 pm 04:59 PM

jquery 보여주다 숨다

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

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

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 
&lt;head&gt; 
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 
&lt;title&gt;用jquery实现两个table的显示与隐藏&lt;/title&gt; 
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.2.6.min.js&quot; language=&quot;javascript&quot;&gt; &lt;/script&gt; 
&lt;style&gt; 
/*整体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;} 
&lt;/style&gt; 
&lt;script&gt; 
/*控制文章字数输入函数*/ 
$(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&gt;num)//判断是否大于限制字符数量 
{ //如果大于限制级字符数量，获得从0到该限制数量的所有字符串 
var totalNum=$(dom).val().substr(0,num); 
$(dom).val(totalNum); //将这些字符重新载入文本框，并弹框提示 
alert("超过字数限制，多出的字将被截断！" ); 
} 
else 
{ 
if(curLength&gt;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'); 
} 
} 
&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;!--包含层start--&gt; 
&lt;p class=&quot;mainbox&quot;&gt; 
&lt;!--导航栏strat--&gt; 
&lt;p id=&quot;nav&quot; class=&quot;mainnav_title&quot;&gt; 
&lt;ul&gt; 
&lt;a href=&quot;javascript:;&quot; onclick=&quot;toOpen(this,&#39;1&#39;);&quot; class=&quot;on&quot;&gt;添加文章&lt;/a&gt; 
&lt;a href=&quot;javascript:;&quot; onclick=&quot;toOpen(this,&#39;2&#39;);&quot;&gt;高级设置&lt;/a&gt; 
&lt;a href=&quot;javascript:;&quot; onclick=&quot;fun_search(this,2);&quot;&gt;搜索&lt;/a&gt; 
&lt;/ul&gt; 
&lt;/p&gt; 
&lt;!--导航栏end--&gt; 
&lt;!--搜索层start--&gt; 
&lt;p class=&quot;article_search&quot; style=&quot;display:none;&quot;&gt; 
&lt;form id=&quot;searchForm&quot; action=&quot;admin/user/0&quot; method=&quot;post&quot;&gt; 
添加时间： 
&lt;input type=&quot;text&quot; class=&quot;input-text&quot; name=&quot;dateMin&quot; id=&quot;dateMin&quot; readonly=&quot;readonly&quot;/&gt; 
&lt;input type=&quot;text&quot; class=&quot;input-text&quot; name=&quot;dateMax&quot; id=&quot;dateMax&quot; readonly=&quot;readonly&quot;/&gt; 
&lt;select name=&quot;channel_id2&quot; id=&quot;channel_id2&quot;&gt; 
&lt;option value=&quot;&quot; &gt;--- 全部栏目 ---&lt;/option&gt; 
&lt;c:forEach items=&quot;${list}&quot; var=&quot;list&quot;&gt; 
&lt;option value=&quot;${list.id}&quot;&gt;--- ${list.name} ---&lt;/option&gt; 
&lt;/c:forEach&gt; 
&lt;/select&gt;  
&lt;select name=&quot;choose&quot;&gt; 
&lt;option value=&quot;&quot; &gt;--- 查询条件 ---&lt;/option&gt; 
&lt;option value=&quot;&quot; &gt;---    ID    ---&lt;/option&gt; 
&lt;option value=&quot;&quot; &gt;---   标题   ---&lt;/option&gt; 
&lt;option value=&quot;&quot; &gt;---   简介   ---&lt;/option&gt; 
&lt;option value=&quot;&quot; &gt;---  发布人  ---&lt;/option&gt; 
&lt;/select&gt;  
&lt;input type=&quot;text&quot; class=&quot;input-text&quot; name=&quot;txtSearch&quot; size=&quot;30&quot;&gt;&lt;/input&gt; 
&lt;input type=&quot;submit&quot; class=&quot;button&quot; value=&quot;搜索&quot;&gt;&lt;/input&gt; 
&lt;/form&gt; 
&lt;/p&gt; 
&lt;!--搜索层end--&gt; 
&lt;!--第一个p层start--&gt; 
&lt;table id=&quot;table_1&quot; cellpadding=0 cellspacing=0 width=&quot;100%&quot; class=&quot;table_form&quot; &gt; 
&lt;tr&gt; 
&lt;th width=&quot;140&quot;&gt;&lt;span&gt;*&lt;/span&gt; 栏目&lt;/th&gt; 
&lt;td&gt; 
&lt;select name=&quot;channel&quot; id=&quot;channel&quot;&gt; 
&lt;option value=&quot;&quot; &gt;--- 全部栏目 ---&lt;/option&gt; 
&lt;c:forEach items=&quot;${list}&quot; var=&quot;list&quot;&gt; 
&lt;option value=&quot;&quot;&gt;&lt;/option&gt; 
&lt;/c:forEach&gt; 
&lt;/select&gt; 
&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th width=&quot;140&quot;&gt;&lt;span&gt;*&lt;/span&gt; 标题&lt;/th&gt; 
&lt;td&gt; 
&lt;input name=&quot;title&quot; id=&quot;title&quot; class=&quot;input-text&quot;&quot; type=&quot;text&quot; size=&quot;90&quot; onkeyup=&quot;words_deal(this,40,1);&quot;&gt;&lt;/input&gt;剩余&lt;span class=&quot;textCount_1&quot;&gt;40&lt;/span&gt;个字&lt;br /&gt; 
&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th width=&quot;140&quot;&gt;缩略图:&lt;/th&gt; 
&lt;td&gt; 
&lt;table&gt; 
&lt;td&gt; 
&lt;input name=&quot;txtSmallPic&quot; type=&quot;text&quot; id=&quot;text&quot; class=&quot;input-text&quot; size=&quot;45&quot;/&gt;   
&lt;input name=&quot;btnUpdown&quot; type=&quot;submit&quot; value=&quot;本地上传&quot; class=&quot;button&quot;/&gt;   
&lt;input name=&quot;btnChoose&quot; type=&quot;submit&quot; value=&quot;站内选择&quot; class=&quot;button&quot;/&gt;   
&lt;input name=&quot;btnCut&quot; type=&quot;submit&quot; value=&quot;裁切&quot; class=&quot;button&quot;/&gt;     
&lt;/td&gt; 
&lt;td&gt;&lt;img src=&quot;thumbnail.ico&quot; style=&quot;width:128px; height:128px;&quot; /&gt;&lt;/td&gt; 
&lt;/table&gt; 
&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th width=&quot;140&quot;&gt;自定义属性 &lt;/th&gt; 
&lt;td&gt; 
&lt;input id=&quot;chkDiyAtrr&quot; type=&quot;checkbox&quot; /&gt; 首页头条推荐 
&lt;input id=&quot;chkDiyAtrr&quot; type=&quot;checkbox&quot; /&gt; 首页焦点图推荐 
&lt;input id=&quot;chkDiyAtrr&quot; type=&quot;checkbox&quot; /&gt; 视频首页每日热点 
&lt;input id=&quot;chkDiyAtrr&quot; type=&quot;checkbox&quot; /&gt; 视频首页头条推荐 
&lt;input id=&quot;chkDiyAtrr&quot; type=&quot;checkbox&quot; /&gt; 视频首页焦点图 
&lt;input id=&quot;chkDiyAtrr&quot; type=&quot;checkbox&quot; /&gt; 首页图片推荐&lt;br&gt;&lt;/br&gt; 
&lt;input id=&quot;chkDiyAtrr&quot; type=&quot;checkbox&quot; /&gt; 栏目首页推荐 
&lt;input id=&quot;chkDiyAtrr&quot; type=&quot;checkbox&quot; /&gt; 视频栏目精彩推荐 
&lt;input id=&quot;chkDiyAtrr&quot; type=&quot;checkbox&quot; /&gt; 网站顶部推荐 
&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th width=&quot;140&quot;&gt;TAG标签&lt;/th&gt; 
&lt;td&gt; 
&lt;input id=&quot;txtTag&quot; class=&quot;input-text&quot; type=&quot;text&quot; size=&quot;&quot;/&gt;   (','号分开，单个标签小于12字节) 
&lt;/td&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 
&lt;!--第一个p层end--&gt; 
&lt;!--第二个p层start--&gt; 
&lt;table id=&quot;table_2&quot; style=&quot;display:none;&quot; cellpadding=0 cellspacing=0 width=&quot;100%&quot; class=&quot;table_form&quot;&gt; 
&lt;tr&gt; 
&lt;th width=&quot;140&quot;&gt;附加选项&lt;/th&gt; 
&lt;td&gt; 
&lt;input id=&quot;chkDiyAtrr&quot; type=&quot;checkbox&quot; /&gt;   提取第一个图片为缩略图    
&lt;input id=&quot;chkWatermark&quot; type=&quot;checkbox&quot; /&gt;  图片是否加水印 
&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt;&lt;th width=&quot;140&quot;&gt;分页选项&lt;/th&gt; 
&lt;td&gt; 
&lt;input id=&quot;rdoManual&quot; type=&quot;radio&quot; class=&quot;input-text&quot; /&gt; 手动 (分页符为： #p#分页标题#e# )  
&lt;input id=&quot;rdoAutomatic&quot; type=&quot;radio&quot; class=&quot;input-text&quot; /&gt;  自动 大小:   
&lt;input id=&quot;txtPage&quot; type=&quot;text&quot; style=&quot; width:20px;&quot; /&gt;K 
&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th width=&quot;140&quot;&gt; 评论选项&lt;/th&gt; 
&lt;td&gt; 
&lt;input id=&quot;rdoAllow&quot; type=&quot;radio&quot; class=&quot;input-text&quot;/&gt;  允许评论    
&lt;input id=&quot;rdoBan&quot; type=&quot;radio&quot; class=&quot;input-text&quot; /&gt;  禁止评论 
&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th width=&quot;140&quot;&gt;&lt;span&gt;*&lt;/span&gt; 标题&lt;/th&gt; 
&lt;td&gt; 
&lt;input name=&quot;title&quot; class=&quot;input-text&quot;&quot; type=&quot;text&quot; size=&quot;90&quot; id=&quot;TextArea&quot; onkeyup=&quot;words_deal(this,20,2);&quot;/&gt; 
剩余&lt;span class=&quot;textCount_2&quot;&gt;20&lt;/span&gt;个字&lt;br /&gt; 
&lt;/td&gt; 
&lt;/tr&gt; 
&lt;tr&gt; 
&lt;th width=&quot;140&quot;&gt; 文章排序 &lt;/th&gt; 
&lt;td colspan=&quot;2&quot;&gt; 
&lt;select id=&quot;u108&quot; class=&quot;u108&quot;&gt; 
&lt;option selected=&quot;&quot; value=&quot;默认排序&quot;&gt;默认排序&lt;/option&gt; 
&lt;option value=&quot;置顶一周&quot;&gt;置顶一周&lt;/option&gt; 
&lt;option value=&quot;置顶一月&quot;&gt;置顶一月&lt;/option&gt; 
&lt;option value=&quot;置顶一年&quot;&gt;置顶一年&lt;/option&gt; 
&lt;/select&gt; 
&lt;/td&gt; 
&lt;/tr&gt; 
&lt;/table&gt; 
&lt;!--第二个p层end--&gt; 
&lt;/p&gt; 
&lt;!--包含层start--&gt; 
&lt;/body&gt; 
&lt;script&gt; 
//切换界面 
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'); 
} 
} 
&lt;/script&gt; 
&lt;/html&gt;

로그인 후 복사

다음은 작업의 렌더링입니다.
이 기사의 사례 등을 읽으신 후 방법을 마스터하셨다고 믿습니다. 얼마나 흥미롭습니까? PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요! jquery 작업 애니메이션 표시 및 숨겨진 효과