您的位置: 首页  >  文章  >  JQ之小白计划六（动画）

JQ之小白计划六（动画）

分类: 文章 • 2024-02-22 11:19:46

1：show和hide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画</title>
 <script src="https://cdn.staticfile.org/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
	*{margin:0;padding:0;}	
	body { font-size: 13px; line-height: 130%; padding: 60px }
	#panel { width: 300px; border: 1px solid #0050D0 }
	.head { height:24px;line-height:24px;text-indent:10px;background: #D49AE1; cursor: pointer;width:100%; }
	.content { padding: 10px; text-indent:24px; border-top: 1px solid #red;display:block; }
</style>

<script type="text/javascript">
$(function(){
        $("#panel h5.head").toggle(function(){
	     $(this).next().hide(600);
	},function(){
	     $(this).next().show(600);
	})
})
</script>
</head>
<body>
	
<div id="panel">
	<h5 class="head">我是标题</h5>
	<div class="content">
		 我是内容 我是内容 我是内容 我是内容  
		 我是内容 我是内容 我是内容 我是内容
	</div>
</div>

</body>
</html>

JQ之小白计划六（动画）

2: fade

<script type="text/javascript">
$(function(){
        $("#panel h5.head").toggle(function(){
	     $(this).next().fadeOut();//淡出
	},function(){
	     $(this).next().fadeIn();//淡入
	})
})
</script>

3: slide

<script type="text/javascript">
$(function(){
        $("#panel h5.head").toggle(function(){
	     $(this).next().slideUp();//上下滑动（隐藏）
	},function(){
	     $(this).next().slideDown();//上下滑动（展示）
	})
})
</script>

4：animate的简单使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel</title>
<style type="text/css">
	*{margin:0;padding:0;}	
	body { padding: 60px }
	#panel {position: relative; width: 150px; height:150px;border: 1px solid #0050D0;background: #FAEB9E; cursor: pointer}
</style>
 <script src="https://cdn.staticfile.org/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
        $("#panel").click(function(){
	   $(this).animate({left: "500px"}, 3000);//3秒运动到距离浏览器左边500px处
	})
})
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

JQ之小白计划六（动画）

5：animate的多重动画

<script type="text/javascript">
$(function(){
	
//点击时:先位移后高度变成200px
    $("#panel").click(function(){
	     $(this).animate({left: "500px"}, 3000).animate({height: "200px"}, 3000);
	})
//点击时:位移和高度改变同时进行
    $("#panel").click(function(){
             $(this).animate({left: "500px",height:"200px"}, 3000);
 	})
})

6：综合动画

<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//透明度为0.5
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)//第一步执行
		      .animate({top: "200px" , width :"200px"}, 3000 )//第二步执行
		      .fadeOut("slow");//第三步淡出
        });
    });

7：css排队问题

没有排队的css: 

<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
		.animate({top: "200px" , width :"200px"}, 3000 )
		.css("border","5px solid blue");//和第一个css同时执行，而不是等到第二个动画结束
        });
    });
</script>

排队的css（回调函数）:

<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
		    .animate({top: "200px" , width :"200px"}, 3000 ,function(){
		           $(this).css("border","5px solid blue");//等第二个动画执行完，才执行此css
		    })
					 
        });
    });
</script>

8: 判断是否动画

<script type="text/javascript">
    $(function(){
		//给id为mover的元素添加动画.
		function animateIt() {
			$("#mover").slideToggle("slow", animateIt);  // animateIt： 函数执行完之后，要执行的函数。
		}
		function animateIt2() {
			$("#mover").fadeToggle("slow", animateIt2);//animateIt2 ：函数执行完之后，要执行的函数。
		}
		animateIt();//默认执行滑入滑出


		$("button").click(function(){
			if(!$('#mover').is(":animated")){//判断元素是否正处于动画状态
				 //如果当前没有进行动画，则添加新动画 
				$('#mover').fadeToggle("slow", animateIt2);
			}else{
				$('#mover').stop();
			}
		});

    });
</script>
</head>
<body>
<button >click</button>
<div class="panel" id="mover">动画元素</div>
</body>

9：延迟的动画

<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
					 .delay(1000)
					 .animate({top: "200px" , width :"200px"}, 3000 )
					 .delay(2000)
					 .fadeOut("slow");
        });
    });
</script>

10：fadeToggle和slideToggle

<script type="text/javascript">
$(function(){
     //淡入淡出
     $("#panel h5.head").click(function(){
	     $(this).next().fadeToggle();
	})
     //滑入滑出
     $("#panel h5.head").click(function(){
	     $(this).next().slideToggle();
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">我是标题</h5>
	<div class="content">
		 我是内容 我是内容 我是内容 我是内容  
		 我是内容 我是内容 我是内容 我是内容
	</div>
</div>
</body>

11：animate仿其它方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿</title>
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
	*{margin:0;padding:0;}	
	body { font-size: 13px; line-height: 130%; padding: 60px }
	#panel { width: 300px; border: 1px solid #0050D0 }
	.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
	.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block; }
</style>

<script type="text/javascript">
$(function(){
	  $("button:eq(0)").click(function () {
		  $("div.content").hide().animate({ opacity : "1" }  );
	  });
	  
	  $("button:eq(1)").click(function () {
		  $("div.content").animate({height : "show" , width : "show" , opacity : "show" } , 600 );
	  });

	  $("button:eq(2)").click(function () {
		$("div.content").animate({height : "show" } , 600 );
	  });

          $("button:eq(3)").click(function () {
		  $("div.content").animate({ opacity : "show" } , 600 );
	  });
    
          $("button:eq(4)").click(function () {
	  	  $("div.content").animate({ opacity : "0.2" } , 600 );
	  });
})
</script>
</head>
<body>
 <button>隐藏元素并取消透明度</button>
 <button>用animate仿show()</button>
 <button>用animate仿slideDown()</button>
 <button>用animate仿fadeIn()</button>
 <button>用animate仿fadeTo()</button>



<div id="panel">
	<h5 class="head">我是标题</h5>
	<div class="content">
		 我是内容 我是内容 我是内容 我是内容  
		 我是内容 我是内容 我是内容 我是内容
	</div
</div>


</body>
</html>

相关推荐