jQuery动画、Ajax，Bootstrap，Maven

城里小火龙

已于 2024-07-04 15:01:28 修改

阅读量777

点赞数 16

CC 4.0 BY-SA版权

分类专栏：从零开始的Java学习文章标签： java-ee

于 2024-06-25 20:43:52 首次发布

本文链接：https://blog.csdn.net/m0_67496588/article/details/139969029

                    
                        
                    
                    Day45 
jQuery动画 
 
 显示和隐藏 
 
 
 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
      
      
//				//方法一：切换事件
//				$("#btn01").toggle(
//					function(){
      
      
//						$("img").hide("slow");
//						$("img").hide(2000);
//					},
//					function(){
      
      
//						$("img").show("fast")
//						$("img").show(1000);
//					}
//				)
				//方法二：toggle()方法
				$("#btn01").click(function(){
      
      
					$("img").toggle(3000)
				})
			})
		</script>
	</head>
	<body>
		
		<button id="btn01">显示和隐藏</button>
		<img src="img/时间.jpg" />
	</body>
</html>

 
 
 
 滑动 
 
 
 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
      
      
				//方法一：切换事件
				$("#btn01").toggle(
					function(){
      
      
//						$("img").slideUp("slow");
						$("img").slideUp(2000);
					},
					function(){
      
      
//						$("img").slidedown("fast")
						$("img").slideDown(1000);
					}
				)
//				//方法二：slideToggle()方法
//				$("#btn01").click(function(){
      
      
//					$("img").slideToggle(3000)
//				})
			})
		</script>
	</head>
	<body>
		
		<button id="btn01">显示和隐藏</button>
		<img src="img/时间.jpg " width="100px" height="100px" />
	</body>
</html>

 
 
 
 淡入淡出 
 
 
 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
      
      
//				方法一：切换事件
//				$("#btn01").toggle(
//					function(){
      
      
//						$("img").fadeOut("slow");
//						$("img").fadeOut(2000);
//					},
//					function(){
      
      
//						$("img").fadeIn("fast")
//						$("img").fadeIn(1000);
//					}
//				)
				//方法二：fadeToggle()方法
				$("#btn01").click(function(){
      
      
					$("img").fadeToggle(3000);
				})
			})
		

                