jQuery入门[6]－动画

jQuery入门[6]－动画

jQuery入门[1]－构造函数
jQuery入门[2]－选择器
jQuery入门[3]－事件
jQuery入门[4]－链式代码
jQuery入门[5]－AJAX
jQuery入门[6]－动画
jQuery直接各种动画，常见的被封装成各种方法，如show()/hide()/slideDown()/fadeIn()等等，参见： Effects

最灵活的则属于animate( params, [duration], [easing], [callback] )方法，参见： animate
其中params为动画的运行结果，可以为各种样式属性，jQuery将在duration指定的时间内，将对象的当前状态渐变为params参数指定的值。如：

<!---->     $( " #go " ).click( function (){
      $( " #block " ).animate({ 
        width:  " 70% " ,
        opacity:  0.4 ,
        marginLeft:  " 0.6in " ,
        fontSize:  " 3em " , 
        borderWidth:  " 10px "
      },  1500  );
    });

params也可以是一些相对数据：

<!---->     $( " #right " ).click( function (){
      $( " .block " ).animate({ " left " :  " +=50px " },  " slow " );
    });

    $( " #left " ).click( function (){
      $( " .block " ).animate({ " left " :  " -=50px " },  " slow " );
    });

通过stop()函数可将对象再在执行的动画暂停。选择符:animated可以判断对象是否处在动画运行状态。
以下为来自官网的一个例子：

<!----> <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
   < script  src ="http://code.jquery.com/jquery-latest.js" ></ script >
  
   < script >
  $(document).ready( function (){
    
    $( " #show " ).click( function  () {
       var  n  =  $( " div " ).queue( " fx " );
      $( " span " ).text( " Queue length is:  "   +  n.length);
    });
     function  runIt() {
      $( " div " ).show( " slow " );
      $( " div " ).animate({left: ' +=200 ' }, 2000 );
      $( " div " ).slideToggle( 1000 );
      $( " div " ).slideToggle( " fast " );
      $( " div " ).animate({left: ' -=200 ' }, 1500 );
      $( " div " ).hide( " slow " );
      $( " div " ).show( 1200 );
      $( " div " ).slideUp( " normal " , runIt);
    }
    runIt();

  });
   </ script >
   < style >
  div  {  margin : 3px ;  width : 40px ;  height : 40px ;
        position : absolute ;  left : 0px ;  top : 30px ;  
        background : green ;  display : none ;   }
  div.newcolor  {  background : blue ;   }
  span  {  color : red ;   }
   </ style >
</ head >
< body >
   < button  id ="show" > Show Length of Queue </ button >
   < span ></ span >
   < div ></ div >
</ body >
</ html >

效果为不断变化的一个方块，因为最后一个动画 $( " div " ).slideUp( " normal " , runIt)执行后又 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ function runIt() { $("#div").show("slow"); $("#div").animate({left:'+=200'},2000); $("#div").slideToggle(1000); $("#div").slideToggle("fast"); $("#div").animate({left:'-=200'},1500); $("#div").hide("slow"); $("#div").show(1200); $("#div").slideUp("normal", runIt); } runIt(); }); </script> 调用runIt方法，所以动画不断循环。