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()
			});

代码007普通

打赏 收藏 海报 链接