jQuery 滑动方法
jQuery 拥有以下滑动方法：slideDown()、slideUp()、slideToggle()
1、jQuery slideDown() 方法（用于向下滑动元素）
语法：$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".filp").click(function(){
$(".panel").slideDown("fast");
});
});
</script>
<style type="text/css">
body,div,p{ padding:0; margin:0 auto;}
div.panel,p.filp{ text-align:center; background:red; height:100px; padding-top:20px;}
div.panel{ height:120px; display:none;}
p.filp{ height:30px;}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="filp">请点击这里</p>
</body>
2、jQuery slideUp() 方法（用于向上滑动元素）
语法：$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".filp").click(function(){
$(".panel").slideUp("fast");
});
});
</script>
<style type="text/css">
body,div,p{ padding:0; margin:0 auto;}
div.panel,p.filp{ text-align:center; background:red; height:100px; padding-top:20px;}
div.panel{ height:120px;}
p.filp{ height:30px;}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="filp">请点击这里</p>
</body>
3、jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
语法：$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".filp").click(function(){
$(".panel").slideToggle("fast");
});
});
</script>
<style type="text/css">
body,div,p{ padding:0; margin:0 auto;}
div.panel,p.filp{ text-align:center; background:red; height:100px; padding-top:20px;}
div.panel{ height:120px; display:none;}
p.filp{ height:30px;}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="filp">请点击这里</p>
</body>
时间： 2024-10-07 11:25:38