PHP-Z

前端

jQuery animate效果演示

2016-9-4 09:18 发布者: 大熊猫
jQuery是一个兼容多浏览器的JavaScript框架,核心理念是write Less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。


一个简单的animate函数尝试, 这个效果在web应用中非常的实用,提供大家参考!
animate(params[,duration[,easing[,callback]]])
    用于创建自定义动画的函数。<br /> 
    这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。 
    注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 
    而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

运行以后,刷新下,主要远程js文件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=gb2312"> 
<script type="text/javascript" src="http://img.phperz.com/data/img/20160826/1472215216_1221.gif) no-repeat right -17px; 
    font-weight:bold; 
    color:#fff; 
    border: 1px solid #669900; 
    height:22px; 
} 

.arrow { 
    background: #99CC00 url(arrow.gif) no-repeat right 5px; 
} 

.box h3 a { color:#fff; } 
.box h3 a:hover { color:#eee; } 

.box { 
    position: relative; 
    background: #363C41; 
    border: 5px solid #4A5055; 
} 
.ar { 
    line-height: 22px; 
    position: absolute; 
    top: 3px; 
    right: 6px; 
    display: block; 
    width: 16px; 
    height: 16px; 
} 

</style> 

</head> 
<body> 
<h1>jQuery demos animate(params[,duration[,easing[,callback]]])</h1> 
<div> 

<div> 
<h3>fdsfds<a href="#"></a></h3> 
    <div> 
    animate(params[,duration[,easing[,callback]]])
 
    用于创建自定义动画的函数。
 
    这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如"height"、"top"或"opacity")。 
    
 
    注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 
    
 
    
 
    而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是"hide"、"show"或"toggle"这样的字符串值,则会为该属性调用默认的动画形式。 
    </div> 
</div> 


 

<div> 
<h3>fdsfds<a href="#"></a></h3> 
    <div> 
    在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。 
    </div> 
</div> 

</div> <!-- endlayout --> 
</body> 
</html> 


关注微信公众号

top100summit

扫一扫关注微信公众号

PHP-Z_COM