JQuery复习之JQuery 动画效果

逃离我推掉我的手 2022-05-23 06:39 221阅读 0赞

#### 今日目录 ####

1、Jquery 隐藏与显示 DOM

2、Jquery 淡入和淡出 DOM

3、Jquery 滑动 DOM

4、Jquery 动画

5、Jquery callBack 回调方法

6、Jquery 暂停动画

#### 一、Jquery 隐藏与显示 DOM ####

![70][]

#### 二、Jquery 淡入和淡出 DOM ####

![70 1][]

#### 三、Jquery 滑动 DOM ####

![70 2][]

#### 四、Jquery 动画 ####

![70 3][]

#### 五、Jquery callBack 回调方法 ####

![70 4][]

#### 六、Jquery 暂停动画 ####

![70 5][]

<!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"/>
    
    <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>

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

![70 6][]

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

![70 7][]

[70]: /images/20220523/b21ec4dbdb6c433a9efe85b87f039b07.png
[70 1]: /images/20220523/07384f926a074f558e2f1f0a9ec337be.png
[70 2]: /images/20220523/305549e529b74efea8f43eec53193126.png
[70 3]: /images/20220523/83974599cfdf499d98af797ab3f69c54.png
[70 4]: /images/20220523/6bc80bb6c69d47609b067b0ac086a68b.png
[70 5]: /images/20220523/86af712ee5a74cdb804ecc789d66fc05.png
[70 6]: /images/20220523/4e61796750714b7fa295d461200732c5.png
[70 7]: /images/20220523/592acca13b0940af8d9d6c2d7cf56cbf.png