运用Animate来实现自定义动画效果

 jQuery中运用Animate来实现自动以动画，可以控制移动方向、速度、形状等等变化等效果。

Css代码：

<style type="text/css"> 
#panel{ 
    position:relative; 
    width:100px; 
    height:100px; 
    border:1px solid #0050D0; 
    background:#96E555; 
    cursor:pointer; 
} 
</style> 

Html代码：

<div id="panel">&nbsp;</div> 

JavaScript代码：

<script language="javascript"> 
    $(function(){ 
        $('#panel').css("opacity","0.5");//设定透明度　 
        $('#panel').click(function(){ 
           $(this).animate({left:"500px",height:"200px",opacity:"1"},3000)//离开原本地方500px 
           .animate({top:"200px",width:"200px"},3000),fadeOut("slow"); 
        }); 
    }); 
</script>