jQuery_效果(滑动)

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>

jQuery_效果(滑动),布布扣,bubuko.com

时间: 06-28