jQuery 小技巧之继续动画、交替动画

1、运用callback函数中的function可以继续没有完成的动画

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$("#bt1").click(function(){
			$("div").animate(
			{
				height:"300px"
			},
			"slow",function(){
				$("div").animate(
				{
					height:"200px"
				});
			});
		});
	});
	</script>

2、在jq中使用动画的时候，想要实现两个功能（动画）轮换出现的时候可以设置一个state变量，if（true）就执行第一个动画，else的时候执行第二个动画，然后再讲state变量置为false。（PS:当然可以使用toggle来实现同一个动画的交替）

eg：

 
 

  
  

   
     <script>
  
  
 
 
 
 

  
  

   
     $(function() {
  
  
 
 
 
 

  
  

   
       var state = true;
  
  
 
 
 
 

  
  

   
       $( "#button" ).click(function() {
  
  
 
 
 
 

  
  

   
         if ( state ) {
  
  
 
 
 
 

  
  

   
           $( "#effect" ).animate({
  
  
 
 
 
 

  
  

   
             backgroundColor: "#aa0000",
  
  
 
 
 
 

  
  

   
             color: "#fff",
  
  
 
 
 
 

  
  

   
             width: 500
  
  
 
 
 
 

  
  

   
           }, 1000 );
  
  
 
 
 
 

  
  

   
         } else {
  
  
 
 
 
 

  
  

   
           $( "#effect" ).animate({
  
  
 
 
 
 

  
  

   
             backgroundColor: "#fff",
  
  
 
 
 
 

  
  

   
             color: "#000",
  
  
 
 
 
 

  
  

   
             width: 240
  
  
 
 
 
 

  
  

   
           }, 1000 );
  
  
 
 
 
 

  
  

   
         }
  
  
 
 
 
 

  
  

   
         state = !state;
  
  
 
 
 
 

  
  

   
       });
  
  
 
 
 
 

  
  

   
     });
  
  
 
 
 
 

  
  

   
     </script>