js之上翻隐藏

来源：互联网发布：域名真实ip 编辑：程序博客网时间：2024/06/03 02:53

$(".upturn").hover(function(){
$(this).find("div:first").animate({"margin-top":"-48px"},200);
},function(){
$(this).find("div:first").animate({"margin-top":"0"},200);

});

.one-quick-menu{width:100%; height: 60px; margin-top: 20px; position: relative; overflow: hidden;}
.one-quick-menu ul li{float:left;}
.one-quick-menu ul .content{width:150px; padding-left: 85px; padding-top: 8px;}
.one-quick-menu ul .content h2{color:#de1d31;font-size: 14px;}
.one-quick-menu ul .content h2 span{font-size: 18px;}
.one-quick-menu ul .content .upturn-toggle{margin-top: 10px;}

<div class="one-quick-menu bg-white mt20">
<ul>
<li class="content upturn">
<div class="quick-price">
<h2><span>快速</span>上传</h2>
<p>海量曝光</p>
</div>
<div class="upturn-toggle">
<p>批量上传</p>
<p>让企业曝光度几何级增长</p>
</div>
</li>
<li class="line">/</li>
<li class="content upturn">
<div class="up-price">
<h2><span>快速</span>上传</h2>
<p>海量曝光</p>
</div>
<div class="upturn-toggle">
<p>批量上传</p>
<p>让企业曝光度几何级增长</p>
</div>
</li>
</ul>
</div>

0 0