JQuery学习24篇(动画)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习24篇(动画)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
div {
width: 300px;
height: 200px;
}

.div1{
	/**div居中**/
/* 	margin:auto; */
	border:10px solid silver;
	background-color:red;
	width:300px;
	height:150px;
	opacity:0.8;/**其他浏览器（0.5为透明度，在0-1之间的浮点数）**/
	filter:alpha(opacity=40);/**IE（40为透明度，在0-100之间的整数）**/
}
</style>
</head>
<body style="background-color: #CCE8CF;">
	<div id="div4" οnclick="fn4();">
		点击我，向上缓缓的消失,再向下缓缓的出现
	</div>
	<div id="div5" οnclick="fn5();">
		点击我....向上缓缓的消失,再向下缓缓的出现
	</div>
	<div id="div6" οnclick="fn6();">
		点击我，向上缓缓的消失,再延迟3秒后再向下缓缓的出现
	</div>
	<h3 style="color: #cd1636;">JQuery学习24篇(动画)</h3>
	<div id="div1" οnclick="fn1();">江西省赣州市于都县(点击我，我就会隐藏)</div>
	<input type="button" value="3秒钟缓缓隐藏图片" οnclick="fn2();">
	<input type="button" value="显示图片" οnclick="showImg();">
	<div id="div2" style="display: flex;">
		<img src="img/a.jpg" alt="">
	</div>
	<input type="button" value="4秒钟缓缓隐藏图片后执行回调函数" οnclick="fn3();">
	<div id="div3" style="width: 600px; height: 400px; display: flex;">
		<img src="img/b.jpg" alt="" style="width: 600px; height: 400px;">
	</div>
	<br/>
	<div id="div7" style="width: 600px; height: 400px; display: flex;">
		<img src="img/c.jpg" alt="" style="width: 600px; height: 400px;">
	</div>
	<input type="button" value="3秒钟缓缓的淡出" οnclick="fn7();">
	<br/><br/>
	<input type="button" value="4秒钟缓缓的淡入" οnclick="fn8();">
	<br/><br/>
	<input type="button" value="淡出淡入" οnclick="fn9();">
	<br/><br/>
	<div class="div1" οnclick="fn10(this);">
		点击我，执行动画效果，animate()函数
	</div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function fn1(){
	$('#div1').hide();
}

function showImg(){
	$('#div2').show();
}

function fn2(){
	//3秒钟缓缓隐藏
	$('#div2').hide(3000);
}

function fn3(){
	$('#div3').hide(4000, function() {
		alert('动画结束了....');
	});
}

function fn4(){
	//向上缓缓的消失
	$('#div4').slideUp(2000);
	//向下缓缓的出现
	$('#div4').slideDown(2000);
}

function fn5(){
	//向上缓缓的消失
	$('#div5').slideUp(2000, function(){
		//向下缓缓的出现
		$('#div5').slideDown(2000);
	});
}

function fn6(){
	//向上缓缓的消失,过3秒后再向下缓缓的出现
	$('#div6').slideUp(2000).delay(3000).slideDown(2000);
}

function fn7(){
	//3秒钟缓缓的淡出
	$('#div7').fadeOut(3000);
}

function fn8(){
	//4秒钟缓缓的淡入
	$('#div7').fadeIn(4000);
}

function fn9(){
	//3秒钟缓缓的淡出,过4秒后再缓缓的淡入
	$('#div7').fadeOut(3000).delay(4000).fadeIn(6000);
}

var flag = 0;
function fn10(obj){
	console.log($(obj), $(obj)[0], $(obj)[0].className, $(obj)[0].innerHTML);
	var params = {"marginLeft":"200px", "width":"800px"};
	var params2 = {"marginLeft":"0px", "width":"400px"};
	if(flag == 0){
// 		$(obj).animate(params);
// 		$(obj).animate(params,2000);
		$(obj).animate(params,2000, function(){//回调函数
			//如下代码：只能瞬间改变，不能缓缓的改变
			$(obj).css('border', '12px solid SeaGreen');
		});
		flag = 1;
	}else{
// 		$(obj).animate(params2);
// 		$(obj).animate(params2,2000);
		$(obj).animate(params2,2000, function() {//回调函数
			//如下代码：只能瞬间改变，不能缓缓的改变
			$(obj).css('border', '5px solid Black');
		});
		flag = 0;
	}
}
</script>
</html>
lay500
发布了622 篇原创文章 · 获赞 581 · 访问量 124万+
他的留言板关注
JQuery学习24篇(动画)

猜你喜欢
