jQuery的动态效果效果演示

Jquery做动态效果，可以使用animate函数，   

animate(params[,duration[,easing[,callback]]])
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。
注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

下面一个简单的animate函数尝试。

<script type="text/javascript">
 $(document).ready(function(){     
  $(".side-box h3").toggle(function(){     
     $(this).addClass("box-arrow");       
       $(this).next(".side-text").animate({      
         height: 'toggle',        
         opacity: 'toggle'      
        }, "slow");     
return false;      
},function(){    $(this).next(".side-text").animate({  height: 'toggle',        
opacity: 'toggle'     
 }, "slow");    
 $(this).removeClass("box-arrow");    
 return false;    
 });  });  
</script> 

 演示请看：
http://www.fvzone.com/jquery/demos/fade.html