jQuery控制差异层实现由大到小,由远及近动画变化效果

本文实例讲述了jQuery控制差异层实现由大到小，由远及近动画变化效果。分享给大家供大家参考。具体如下：

这里介绍jQuery控制差异由大到小，由远及近动画变化效果，使用jquery生成动画效果的一个小例子，希望大家喜欢。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-div-animate-cha-style-demo/

具体代码如下：

！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' /titlePanel控制差异运动，由大到小变化/title style type=' text/CSS ' * { margin :0；划水：0;}车身{ padding: 60px } #面板{相对位置：宽度： 100像素；高度：100 pxborder: 1px固体# 0050D0背景# 96E555cursor :指针}/style脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/script脚本类型=' text/JavaScript ' $(function(){ $(' # panel ')).css(“”不透明度',' 0.5 ');//设置不透明度$('#panel ').单击(function(){ $(this)).动画({left: '400px '，height:'200px '，opacity: ' 1 ' }，3000).animate({top: '200px '，width :'200px'}，3000，function(){ $(this).css(“”边框，' 5px纯蓝');}) });});/script/head dydiv id=' panel '/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。