jquery动画效果animate与toggle方法示例

发布时间:2020-01-17编辑:脚本学堂
有关jquery animate与toggle实现动画效果的方法,animate() 方法执行 CSS 属性集的自定义动画,toggle() 方法切换元素的可见状态,一个简单的例子。

1、animate()方法执行 CSS 属性集的自定义动画。

语法:

$("divImg").animate(styles,speed,easing,callback)

参数:styles 必填,规定产生动画效果的 CSS 样式和值
speed 可选,规定动画产生速度,默认normal,还有fast ,slow,毫秒值
easing 可选,不同的动画点种设置速度(很少使用)
callback可选,animate函数之后执行的函数

2、toggle()方法切换元素的可见状态。
语法:

$(selector).toggle(speed,callback,switch)

参数:三个参数都是可选的,
switch:布尔值。规定 toggle 是否隐藏或显示所有被选元素。true、false,如果设置此参数,则无法使用 speed和 callback 参数。

例子:
 

复制代码 代码示例:
<script type="text/javascript">
// 收缩展开效果 www.jb200.com
$(document).ready(function () {
$(".information_title").toggle(function () {
$(this).next(".information_contant").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
}, function () {
$(this).next(".information_contant").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
});
});
</script>
<div class="information_title"> 
</div>
<div class="information_contant">
</div>