jquery实现先淡出再折叠收起的动画效果

本文实例讲述了jquery实现先淡出再折叠收起的动画效果。分享给大家供大家参考。具体如下：

这里使用jquery实现先淡出再折叠形变的动画效果，动画折叠展开一个层，先淡出，然后差异又发生形状的改变，整体不错哦。

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejquery先淡出再变形的动画/title style type=' text/CSS ' * { margin :0；划水：0;} body { font-size : 13px线高： 130%;padding: 60px } #面板{ width: 300pxborder: 1px实心#0050D0 } .头部{ padding: 5px背景#光标：指针}。内容{ padd : 10 extext-indent : 2 em；边框-top: 1px实心# 0050D0显示：块；}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js/script脚本类型=' text/JavaScript ' $(function(){ $(' # panel H5。head ').切换(函数(){ $(this)).下一个(“div.content”).淡出()；}，function(){ $(this).下一个(“div.content”).fadeIn()；})}))/script/head dydiv id=' panel ' H5类=' head ' jquery动画制作实例/h5 div class='content '展示使用jQuery生成动画效果的一个小例子，让一个差异层先淡出然后再发生形变，最后折叠消失的特效代码/div/div/body/html。希望本文所述对大家的jquery程序设计有所帮助。