jquery操作アニメーション表示と隠し効果

今回はjqueryの操作アニメーションの表示と非表示の効果についてお届けします。jqueryの操作アニメーションの表示と非表示に関する注意事項を実際に見てみましょう。

ここ数日間、私はインタラクティブ性を向上させるために、いくつかのエフェクトを実行する必要があるのですが、ブラウザーの互換性が常に不十分なため、私は jquery フレームワークを選択しました。CSS スタイル、DOM ノード、および独自の機能を通じて、より優れたユーザー エクスペリエンスを実現できます。このケースには 3 つの機能点があります。それらは次のとおりです:
1. jquery 独自の toggle() 関数を使用して、レイヤーの非表示と表示アニメーションを実装します。導入後は普遍的に使用できます);
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 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

jQuery は、ポータル Web サイトのナビゲーション ページ上の画像のドラッグによる並べ替えを実装します

jQuery は、州と都市のスライド切り替えを実装します (コード付き)

以上がjquery操作アニメーション表示と隠し効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。