JQuery:基础动画效果

JQuery基础动画效果

  • 放大缩小效果
属性名属性说明
show(speed,fn)显示元素
hide(speed,fn)隐藏元素
toggle(speed,fn)1.使显示元素隐藏2.使隐藏元素显示

参数1:动画效果持续时间。单位:毫秒
参数2:动画效果完成后执行的函数,可不写

代码示例:

<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
		<script>
			function run1(){
				var picture = $("#picture");
				picture.hide(2000);
			}
			function run2(){
				var picture = $("#picture");
				picture.show(2000);
			}
			function run3(){
				var picture = $("#picture");
				picture.toggle(2000);
			}
		</script>
	</head>
	<body>
		<img id="picture" src="../img/1.jpg" />
		<button onclick="run1()">点击隐藏图片</button>
		<button onclick="run2()">点击显示图片</button>
		<button onclick="run3()">显示/隐藏图片</button>
	</body>
  • 上下滑动效果
属性名属性说明
slideDown(speed,fn)显示元素
slideUp(speed,fn)隐藏元素
slideToggle(speed,fn)1.使显示元素隐藏2.使隐藏元素显示

代码参考上例

  • 淡入淡出效果
属性名属性说明
fadeIn(speed,fn)显示元素
fadeOut(speed,fn)隐藏元素
fadeToggle(speed,fn)1.使显示元素隐藏2.使隐藏元素显示

代码参考上例

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值