教程集 > jQuery > jquery 教程 > 正文 jQuery animate效果演示

jQuery animate效果演示

发布时间：2013-09-10 编辑：jiaochengji.com

一个简单的animate函数尝试，这个效果在web应用中非常的实用，提供大家参考！

一个简单的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.jb51.net/jslib/<a href="http://www.jiaochengji.com/
" target="_blank" class="inner-link">jquery</a>/jquery-1.2.6.js"></script>

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

},function(){ 
         $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); 
         $(this).removeClass("arrow"); 
         return false; 
}); 
}); 
</script> 
<style>

/* 初始化样式 */ 
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;} 
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}

h1 { margin: 42px 0 20px; font-size: 18px; text-align: center; }

.clear { clear: both; } 
a { color:#000; text-decoration: none; } 
a:hover { color:#999; text-decoration: none; }

body { 
    margin: 0 auto; 
    width: 960px; 
    background: #282c2f; 
    color: #d1d9dc; 
    font: 12px 'Lucida Grande', Verdana, sans-serif; 
}

#layout { 
    margin: 0 auto; 
    width: 280px; 
    }

.text { 
    line-height: 22px; 
    padding: 0 6px; 
    color:#666; 
}

.box h3 { 
    font-size: 12px; 
    padding-left: 6px; 
    line-height: 22px; 
    background: #99CC00 url(arrow.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 id="layout">

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

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

</div>  
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章：
很酷的60款jQuery 幻灯片演示和下载
 jQuery队列控制方法详解queue()/dequeue()/clearQueue()
25个非常棒的jQuery滑块插件和教程小结
 jquery animate动画效果演示实例
 jquery (show,fadeOut,Animate)简单效果
 推荐40个非常优秀的jQuery插件和教程【系列三】
jquery animate实现DIV变化或左右移动
 jQuery animate效果演示
 基于jquery的动画效果代码
 jQuery动画效果animate和scrollTop结合使用实例

上一篇：Jquery 设置标题的自动翻转下一篇：jquery 模式对话框终极版实现代码

[关闭]

jQuery animate效果演示

最近更新

浏览排行