jQuery学习:内置动画 淡出/淡入 展开/收缩 显示/隐藏

fadeOut():慢慢淡出  改变透明度 opcity 1--0  然后显示display:none

fadeOut(速度,)

速度的取值:slow normal fast 1000ms 取值

		var $div1=$('.div1')
	$('#btn1').click(function(){
				$div1.fadeOut(1000)
			});

fadeIn:淡入 display 0 --1 display block

			$('#btn2').click(function(){
				$div1.fadeIn(1000)
			});

切换淡入淡出效果  

			$('#btn3').click(function(){
				$div1.fadeToggle()
			});

可以有回调函数 对动画完成做出指示

			var $div1=$('.div1')
			$('#btn1').click(function(){
				$div1.fadeOut(1000,function(){
					alert('动画完成了');
				});
			});
			$('#btn2').click(function(){
				$div1.fadeIn(1000);
			});
			$('#btn3').click(function(){
				$div1.fadeToggle()
			});

慢慢收缩:slideUp 向上收缩 主要变化的是当前元素变化的高度

慢慢展开:slideDown 向下展开

收缩展开切换:

			$('#btn4').click(function(){
				$div1.slideUp();
			});
			$('#btn5').click(function(){
				$div1.slideDown();
			});
			$('#btn6').click(function(){
				$div1.slideToggle()
			});

显示隐藏:默认没有动画--------这三个属性是东湖改变的有透明度 宽 高 ---加上时间就是动画

show():(不)带动画的显示

hide():(不)带动画的隐藏

toggle:(不)带动画的切换显示/隐藏

			$('#btn7').click(function(){
				$div1.show();
			});
			$('#btn8').click(function(){
				$div1.show(1000);
			});
			$('#btn9').click(function(){
				$div1.hide(1000)
			});
			$('#btn10').click(function(){
				$div1.toggle()
			});

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值