js移動端點擊隱藏和出現指定div（包含少量特效）

具體效果能夠上百度雲下載查看：

連接：https://pan.baidu.com/s/1ftkx_fRu5BLkD97DWgQpWw
提取碼：1na6

css代碼：

*{
margin: 0;
padding: 0;
font-family: "微軟雅黑";
}
html,body{
width: 100%;
height: 100%;
position: relative;
}
.pageContent{
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
background: #f2f2f2;
}
.baseRule_btn{
position: absolute;
right: 0;
background: #2f6fb7;
color: #ffffff;
font-size: 0.8rem;
line-height: 1.5rem;
padding: 0.5rem 0.2rem 0.5rem 0.5rem;
border-bottom-left-radius: 0.6rem;
border-top-left-radius: 0.6rem;
}

.baseRule{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
display: flex;
align-items: center;
transform: scale(0);
transition: transform 1s;
}
.baseRule_contents{
width: 95%;
height: 55%;
margin-left: 5%;
overflow: hidden;
}
.baseRule_contents_hideBtn{
float: left;
width: 8%;
display: flex;
align-items: center;
background: #2f6fb7;
height: -webkit-fill-available;
border-bottom-left-radius: 0.6rem;
border-top-left-radius: 0.6rem;
}
.baseRule_contents_hideBtn span{
display: inline-block;
width: 0px;
border-style: solid;
border-width: 8px 10px 8px;
border-color: transparent transparent transparent #fff;
margin-left: 0.6rem;
}
.baseRule_contents_words{
float: left;
width: 82%;
padding: 0% 5%;
background: #f2f2f2;
font-size: 0.9rem;
line-height: 1.35rem;
color: #444;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: flex;
align-items: center;
}
.baseRule_contents_words_box{
height: 87%;
overflow-y: auto;
}

 

body體代碼：

<div class="pageContent">
<!--按鈕-->
<div class="baseRule_btn JS-baseRule_btn">
<div>點</div>
<div>擊</div>
<div>按</div>
<div>鈕</div>
</div>
<!--點擊按鈕以後出現的內容-->
<div class="baseRule">
<div class="baseRule_contents">
<div class="baseRule_contents_hideBtn JS-baseRule_contents_hideBtn"><span></span></div>
<div class="baseRule_contents_words">
<div class="baseRule_contents_words_box">
噫籲嚱，危乎高哉！蜀道之難，難於上青天！蠶叢及魚鳧，開國何茫然！爾來四萬八千歲，不與秦塞通人煙。西當太白有鳥道，能夠橫絕峨眉巔。地崩山摧壯士死，而後天梯石棧相鉤連。上有六龍回日之高標，下有衝波逆折之回川。黃鶴之飛尚不得過，猿猱欲度愁攀援。青泥何盤盤，百步九折縈巖巒。捫參歷井仰脅息，以手撫膺坐長嘆。
問君西遊什麼時候還？畏途巉巖不可攀。但見悲鳥號古木，雄飛雌從繞林間。又聞子規啼夜月，愁空山。蜀道之難，難於上青天，令人聽此凋朱顏！連峯去天不盈尺，枯鬆倒掛倚絕壁。飛湍瀑流爭喧豗，砯崖轉石萬壑雷。其險也如此，嗟爾遠道之人胡爲乎來哉！
劍閣崢嶸而崔嵬，一夫當關，萬夫莫開。所守或匪親，化爲狼與豺。朝避猛虎，夕避長蛇；磨牙吮血，殺人如麻。錦城雖雲樂，不如早還家。蜀道之難，難於上青天，側身西望長諮嗟！
</div>
</div>
</div>
</div>
</div>

 

script代碼：

$(".JS-baseRule_btn").unbind("click").click(function(){
baseRule_btn_width = $(".baseRule_btn").innerWidth();//按鈕的寬度
console.log(baseRule_btn_width)
$(".baseRule").stop().animate({left:"0"},1000);
for(var i=0.001;i<=1;i=i+0.001){
$(".baseRule").css("transform","scale("+i+")");
if(parseFloat(i).toFixed(3)==0.999){
$(".baseRule").css("transform","scale(1)");
}
}
// $(".baseRule_btn").css("right","-"+baseRule_btn_width+"px");
$(".baseRule_btn").stop().animate({right:"-"+baseRule_btn_width+"px"},1000);

})
$(".JS-baseRule_contents_hideBtn").unbind("click").click(function(){
$(".baseRule").stop().animate({left:"100%"},1000);
setTimeout(function(){
$(".baseRule").css("transform","scale(0)");
$(".baseRule_btn").stop().animate({right:"0"},1000);
},1000);
})