当前位置: 首页 > 工具软件 > Slide Panel > 使用案例 >

jquery滑动 简单的 slide panel 效果

孟俊发
2023-12-01
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");去掉slide则不滑动  
$(selector).slideDown(speed,callback)单向
$(selector).slideUp(speed,callback)单向

$(selector).slideToggle(speed,callback) 往返,都可以
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>
</div>
 
<p class="flip">请点击这里</p>
 
</body>
</html>

转载于:https://www.cnblogs.com/EveryMan/archive/2011/07/21/2113030.html

 类似资料: