jquery如何实现设置元素的滑动效果呢?


摘要:
下文使用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实现滑动的示例分享

jquery实现滑动的示例分享