JQuery复习之JQuery 动画效果

今日目录

1、Jquery 隐藏与显示 DOM

2、Jquery 淡入和淡出 DOM

3、Jquery 滑动 DOM

4、Jquery 动画

5、Jquery callBack 回调方法

6、Jquery 暂停动画

一、Jquery 隐藏与显示 DOM

二、Jquery 淡入和淡出 DOM

三、Jquery 滑动 DOM

四、Jquery 动画

五、Jquery callBack 回调方法

六、Jquery 暂停动画

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#b1").click(function(){
			$("#p1").show();
		});
		
		$("#b2").click(function(){
			$("#p1").hide();
		});
		
		$("#b3").click(function(){
			$("#d1").fadeOut();
		});
		
		$("#b4").click(function(){
			$("#d1").fadeIn();
		});
		
		$("#b5").click(function(){
			// $("#d1").fadeToggle();
			// $("#d1").fadeToggle("slow");
			$("#d1").fadeToggle(10000);
		});
		
		$("#b6").click(function(){
			$("#d1").fadeTo("slow",0.1);
			$("#d2").fadeTo("slow",0.5);
			$("#d3").fadeTo("slow",0.9);
		});
		
		$("#b7").click(function(){
			$("#d4").slideDown("slow");
		});
		
		$("#b8").click(function(){
			$("#d4").slideUp("slow");
		});
		
		$("#b9").click(function(){
			$("#d5").animate({left:'500px'},'slow');
		});
		
		$("#b10").click(function(){
			$("#d5").animate({
				left:'500px',
				opacity:0.5,
				height:'150px',
				width:'150px'
				},'slow');
		});
		
		$("#b11").click(function(){
			$("#d5").animate({
				left:'500px',
				opacity:0.5,
				height:'+=150px',
				width:'+=150px'
				},'slow');
		});
		
		$("#b12").click(function(){
			$("#p2").show(function(){
				alert("小日本出来了！");
			});
		});
		
		$("#b13").click(function(){
			$("#d6").animate({left:'500px'},'slow');
		});
		
		$("#b14").click(function(){
			$("#d6").stop();
		});
	});
</script>
</head>
<body>
<input type="button" value="出来" id="b1"/>
<input type="button" value="滚" id="b2"/>
<p id="p1">小日本</p>
<hr/>
<input type="button" value="淡出" id="b3"/>
<input type="button" value="淡入" id="b4"/>
<input type="button" value="淡入淡出开关" id="b5"/>
<input type="button" value="透明度" id="b6"/>
<div id="d1" style="width: 100px;height: 100px;background-color: red;margin: 10px;"></div>
<div id="d2" style="width: 100px;height: 100px;background-color: green;margin: 10px;"></div>
<div id="d3" style="width: 100px;height: 100px;background-color: blue;margin: 10px;"></div>
<hr/>
<input type="button" value="向下滑动" id="b7"/>
<input type="button" value="向上滑动" id="b8"/>
<div id="d4" style="background-color: gray;display: none;height: 100px;width: 500px;">
	<p>Jav1234</p>
	<p>Java1234掉渣天！</p>
</div>
<hr/>
<input type="button" value="向左移动" id="b9"/>
<input type="button" value="动画效果2" id="b10"/>
<input type="button" value="动画效果3" id="b11"/>
<!-- <div id="d5" style="width: 100px;height: 100px;background-color: red;margin: 10px;position: absolute;"></div> -->
<hr/>
<input type="button" value="回调事件" id="b12"/>
<p id="p2" style="display: none;">小日本</p>
<hr/>
<input type="button" value="向左移动" id="b13"/>
<input type="button" value="停止" id="b14"/>
<div id="d6" style="width: 100px;height: 100px;background-color: red;margin: 10px;position: absolute;"></div>
</body>
</html>

添加小编微信可以获取免费资源，二维码

要用到的工具，关注公众号直接免费获取：

JQuery复习之JQuery 动画效果

今日目录

一、Jquery 隐藏与显示 DOM

二、Jquery 淡入和淡出 DOM

三、Jquery 滑动 DOM

四、Jquery 动画

五、Jquery callBack 回调方法

六、Jquery 暂停动画

猜你喜欢