摘要:
下文使用jquery实现元素的滑动效果的示例分享，如下所示:
滑动效果主要应用于：
点击元素时，元素向下或向上运动，
那么jquery中如何实现这一需求呢？
下文将一一道来，如下所示:
实现思路:
使用jquery的slideup方法
即可实现元素为滑动效果的示例
例:
jquery 实现元素滑动效果的示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>maomao365.com-滑动效果的示例</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script>
<style>
div{
margin:10px;
}
#flipshow,#content,#fliphide,#fliptoogle{
padding:5px;
background-color:blue;
color:white;
text-align: center;
border:1px solid green;
}
#content {
padding:50px;
display:none ;
}
</style>
<script>
$(document).ready(function(){
$("#flipshow").click(function(){
$("#content").slideDown(3000);
});
$("#fliphide").click(function(){
$("#content").slideUp(1000);
});
$("#fliptoogle").click(function(){
$("#content").slideToggle(1000);
});
});
</script>
</head>
<body>
<p>
maomao365.com <br />
jquery 元素滑动效果的示例分享
</p>
<hr />
<div id="flipshow">慢速滑动</div>
<div id="fliphide">快速滑动</div>
<div id="fliptoogle">显示/隐藏</div>
<div id="content">内容maomao365.com</div>
</body>
</html>
jquery实现滑动的示例分享