滑动效果

翻译 2015年11月18日 16:32:40

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>


相关文章推荐

仿京东首页沉浸式以及滑动效果

  • 2017年09月13日 11:31
  • 15.56MB
  • 下载

Android实现左右滑动的指引效果

在一般情况下,Android左右滑动的指引效果是指在应用第一次启动时,会显示一些帮助界面,用户可通过手指左右滑动来了解应用信息。当用户滑动到最后一页时,可通过点击进入游戏应用。如下图所示: 直接上...

滑动页面效果

  • 2016年06月29日 10:36
  • 123KB
  • 下载

jquery滑动图片效果

  • 2015年12月18日 21:37
  • 183KB
  • 下载

ViewPager,ActionBar,Fragment应用--模仿通讯录滑动效果

最近由Android2.3切换到Android4.0的开发,一下子居然有点不适应,Android4.0新增了一些功能模块如ActionBar,Fragment等其实在Android3.0就有了,但一直...
  • hjj0212
  • hjj0212
  • 2013年01月23日 21:20
  • 18118

css3实现导航滑动效果

  • 2017年05月24日 10:37
  • 6KB
  • 下载

js代码滑动效果

  • 2015年05月29日 12:11
  • 414KB
  • 下载

Axure8 实现移动端页面上下滑动效果

目前,很多Axure新人都在问如何实现界面上下滑动效果,网上相关的教程也不少,各有各的方法,但是很少有教程对滑动界限设置做出比较详细的说明,其实在工作过程中,个人发现练好Axure是很有意提升逼格的,...
  • Amydom
  • Amydom
  • 2017年01月13日 16:17
  • 10908

鼠标滑动文字显示效果

  • 2015年07月01日 09:54
  • 92KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:滑动效果
举报原因:
原因补充:

(最多只允许输入30个字)