jQuery用div以滑动方式展开和收起代码实例

以滑动方式展现和收缩一个div比瞬间展开和收缩的方式更为美观。

下面就通过一段代码示例介绍一下如何利用jquery实现此功能，当然jquery就是js。

代码实例:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.gaodaima.com/" /> 
<title>搞代码</title> 
<style type="text/css">
body{text-align:center}
.box{
  width:200px;
  height:100px;
  background-color:green;
  margin:0px auto;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
    $(".box").slideUp();
  });
  $("#show").click(function(){
    $(".box").slideDown();
  });
})
</script>
</head>
<body>
<div class="box"></div>
<input type="button" id="hide" value="点击隐藏"/>
<input type="button" id="show" value="点击展开"/>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

body{text-align:center}

.box{

width:200px;

height:100px;

background-color:green;

margin:0px auto;

}

</style>

$(document).ready(function(){

$("#hide").click(function(){

$(".box").slideUp();

});

$("#show").click(function(){

$(".box").slideDown();

});

})

</script>

</head>

<body>

</body>

</html>

原创文章，转载请注明： 转载自搞代码

本文链接地址: jQuery用div以滑动方式展开和收起代码实例

分享到： QQ好友微信 QQ空间新浪微博印象笔记轻笔记有道云笔记

微信赏一包辣条吧~

支付宝赏一听可乐吧~

0条评论

搞代码

jQuery用div以滑动方式展开和收起代码实例

评论

发表评论取消回复

mysql增多新分区报错，提示value must be strictly increasing for each partition

CSS圆角卡片样式-CSS应用实例

MySql用哪种格式存储图片的？该怎么处理

css : CSS简析_css

CSS按钮组-CSS应用实例

基于Java开发的开源《殖民霸业》开源复刻版-FreeCol软件及源码免费下载

开源压力测试工具 Apache JMeter 5.3软件及源码免费下载

开源视频会议系统OpenMeetings软件带源码免费下载

开源字幕编辑器v7.0.3版本Jubler免费下载

开源全文搜索服务器Solr免费下载

发表评论 取消回复

发表评论取消回复