元素显隐js代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<style type="text/css">
#al{color:darkblue;font-size: 20px;width:40px;height:40px;text-align: center;background-color: rgba(255,255,255,0.8);box-shadow: inset 0 0 20px rgba(0,0,0,0.4);margin-top:0px;border-radius: 50%;}
.dh{display:flex;flex-direction: row;margin-top:50px;}
i{width:40px;height:40px;border-radius: 50%;background-color: rgba(255,255,255,0.8);box-shadow: inset 0 0 20px rgba(0,0,0,0.4);text-align: center;}
.box{width:300px;height:60px;display: flex;flex-direction: row;justify-content: space-around ;margin-top:0px;overflow: hidden;}
b{color:crimson;font-size: 36px;text-align: center;}
#zs{position: absolute;bottom:35px;right:-45px;color:snow;font-size: 20px;
display: none;
width: 120px;
height: 35px;
line-height: 35px;
text-align: center;
background: green;
}
#zs:after {
content: "";
width: 0px;
height: 0px;
border-top: 10px solid green;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
display: block;
margin-left: 55px;
}
#dj{position: relative;}
#dj:hover #zs{display: block;}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".box").hide();
$("#dj").click(function(){
$(".box").animate({
width:‘toggle‘
},"slow");
});
});
</script>
</head>
<body>
<div class="dh">
<div class="box">
<i><b class="fa fa-apple"></b> </i>
<i><b class="fa fa-envira"></b> </i>
<i> <b class="fa fa-folder-open"></b></i>
<i><b class="fa fa-heart"></b> </i>
<i><b class="fa fa-home"></b> </i>
<i><b class="fa fa-car"></b> </i>
</div>
<i id="dj"><b class="fa fa-cog" style="font-size: 20px;"></b>
<p id="zs">我要自学网</p>
</i>
</div>
</body>
</html>
原文：https://www.cnblogs.com/sf6666/p/14966818.html