滑动效果

最新推荐文章于 2022-01-27 10:57:25 发布

jimjiayu

最新推荐文章于 2022-01-27 10:57:25 发布

阅读量351

点赞数

分类专栏： jquery

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.1 滑动效果

上滑

$(selector).slideUp(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下滑 slideDown

切换滑动 slideToggle()

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
	.box{
		width:50px;
		height:200px;
		background-color:#F39;
		margin:0 50px;
		}
</style>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script>
	$(function(){
		$('.up').click(function(){
			$('.box').slideUp(1500);
			})
		$('.down').click(function(){
			$('.box').slideDown(1500);
			})
		$('.toggle').click(function(){
			$('.box').slideToggle(1500);
			})
		})
</script>
</head>

<body>
<button class="up">上滑动</button>
<button class="down">下滑动</button>
<button class="toggle">切换滑动</button>
<div class="box"></div>
</body>
</html>