Jquery简单动画的实现记录

<div style="background:#98bf21;height:100px;width:100px;">

//从元素当前所在位置,往下消失
$(document).ready(function(){
  $("button").click(function(){
    $("div").css('position','absolute');
    $("div").css('top',$("div").position().top);
    $("div").animate({
      top:'100%',
      opacity:'0.5',
      width:'150px',
      height:'0px',
    });
  });
});

 

<textarea></textarea>

//textarea选中时变高20px,离开时变回去
<script> 
$(document).ready(function(){
  $("textarea").focus(function(){
    $("textarea").animate(
       {height:'+=20px'}
     );
  });
  $("textarea").blur(function(){
    $("textarea").animate(
       {height:'-=20px'}
     );
  });
});
</script>