JQ之小白计划六（动画）

àì夳堔傛蜴生んèń 2022-05-03 13:27 285阅读 0赞

### 1：show和hide ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_27_color_FFFFFF_t_70][]

### 2: fade ###

### 3: slide ###

--------------------

### 4：animate的简单使用 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_27_color_FFFFFF_t_70 1][]

### 5：animate的多重动画 ###

### 6：综合动画 ###

### 7：css排队问题 ###

没有排队的css:

排队的css（回调函数）:

### 8: 判断是否动画 ###

### 9：延迟的动画 ###

### 10：fadeToggle和slideToggle ###

### 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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_27_color_FFFFFF_t_70]: /images/20220503/5aad36bdd72b4432a57d73272d1ffcfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw_size_27_color_FFFFFF_t_70 1]: /images/20220503/491400b077b64027ae421efcaf7a032c.png