jQuery 显示和隐藏以及淡出淡入效果
Posted tyblwmbs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 显示和隐藏以及淡出淡入效果相关的知识，希望对你有一定的参考价值。
jQuery实现动画效果？
1) 显示和隐藏
show()：显示
hide()：隐藏
togger()：显示和隐藏的组合
1
2
3
4
<script type="text/javascript">
$(function(){
$("tr:even").css("background-color","gray").eq(1).css("background-color","red");//设置tr的偶数的背景颜色，同时设置迷醉的背景颜色
$("tr:gt(4)").hide();
$(".more").click(function(){
//$("tr:gt(4)").show();
$("tr:gt(4)").toggle();//点1下隐藏，再点1下显示
});
});
</script>
</head>
<body>
<h3>乐淘，发现更多生活，快乐就在你身边...</h3>
<h4>近期热门......<a href="#" class="more">（更多）</a>
<table width="800px">
<tr><td>语言之庭</td></tr>
<tr><td>斯托克</td></tr>
<tr><td>迷醉</td></tr>
<tr><td>巨人携手皆可</td></tr>
<tr><td>副作用</td></tr>
<tr><td>血肉之躯</td></tr>
<tr><td>7号房的礼物</td></tr>
<tr><td>惊声笑</td></tr>
</table>
<a href="#">更多排名</a>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2) 以“滑动”的方式显示
slidedown():向下增大
slideup()：向上减少
1
2
3
<script type="text/javascript">
$(function(){
$("h2").click(function(){
$("#div1").slideUp("slow");
});
$("h3").click(function(){
$("#div1").slideDown("slow");
});
});
</script>
</head>
<body>
<h2>向上</h2>
<h3>向下</h2>
<div id="div1" style="width: 200px;">
<p>
极域课堂管理系统软件 使您可以管理教室、与学生相互沟通，以及为个人提供帮助，坐在计算机旁即可完成所有这些工作。
使用 极域课堂管理系统软件，您可以：
</p>
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
3) 淡入淡出
fadeIn：淡入效果
fadeout：淡出效果
1
2
3
<script type="text/javascript">
$(function(){
$("h2").click(function(){
$("#div1").fadeIn(2000);
});
$("h3").click(function(){
$("#div1").fadeOut("slow");
});
});
</script>
</head>
<body>
<h2>淡入</h2>
<h3>淡出</h2>
<div id="div1" style="width: 200px;">
<p>
极域课堂管理系统软件 使您可以管理教室、与学生相互沟通，以及为个人提供帮助，坐在计算机旁即可完成所有这些工作。
使用 极域课堂管理系统软件，您可以：
</p>
</div>
</body>
---------------------
作者：猫代码
来源：CSDN
原文：https://blog.csdn.net/qq_33442160/article/details/81567164
版权声明：本文为博主原创文章，转载请附上博文链接！
以上是关于jQuery 显示和隐藏以及淡出淡入效果的主要内容，如果未能解决你的问题，请参考以下文章