css轻松搞定显示隐藏的效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css轻松搞定显示隐藏的效果相关的知识，希望对你有一定的参考价值。
参考技术A 在网页中我们经常看到鼠标划上时会显示一些网页中一开始没有的东西，例如二级菜单，或者鼠标划上图片时会显示一些淡入淡出的效果问：这是怎么原理实现的？
其实就是显示和隐藏
问：那么这个现实和隐藏如何实现呢？
其实方法有很多，下面我来带着大家看一下每种实现方式和其不同点
无论使用哪一种方式实现，首先这个东西必须先存在，我们先在结构中存在
一级导航
二级导航 二级导航 二级导航
这样的结构写法在我们的页面中一开始是所有的导航都是显示的
我们想要实现一开始只显示一级导航效果，当鼠标划上一级导航的时候显示二级导航效果
方法一：用display:none;和display：block;方式实现
一开始给p标签一个display:none;
当鼠标划上div时让p标签显示 div:hover pdisplay:block;
注意：此方式可以实现显示和隐藏的效果，但是不支持过渡效果，也就是你不能看到逐渐显示的过程
方法二：用opacity：0； opacity：1方式实现
一开始给p标签一个opacity:0;
当鼠标划上div时让p标签显示 div:hover popacity:1;
注意：此方式可以实现显示和隐藏的效果，支持过渡效果，在p标签的初始状态上加上一个transition:1s; 你是可以看到从无到有淡入淡出的效果的
>need-to-insert-img
方法三：用height：0； height：100px方式实现
一开始给p标签添加一个height:0; 但是由于里面有二级菜单的内容文字所以会存在溢出，添加一个overflow：hidden即可解决
当鼠标划上div时让p标签显示 div:hover pheight:100px;
注意：此方式可以实现显示和隐藏的效果，支持过渡效果，在p标签的初始状态上加上一个transition:1s; 你是可以看到类似于卷帘门从上向下拉的效果。
哈哈是不是学到了，好了不说了，老铁们自己看着办法，反正我把方式方法都告诉大家了，是收藏还是点赞。
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
版权声明：本文为博主原创文章，转载请附上博文链接！
以上是关于css轻松搞定显示隐藏的效果的主要内容，如果未能解决你的问题，请参考以下文章