jQuery提供了很多动画效果:
- 控制元素显示与隐藏
- 控制元素淡入和淡出
- 控制元素滑动
- 自定义动画
一. 控制元素显示和隐藏
以前可以通过css()方法改变元素的display属性的值达到显示(block)和隐藏(none)元素的目的。在jQuery中,提供了专门的方法控制元素的显示和隐藏,并且增加了动画效果。
show()等同于
$(selector).css("display","block");
除了可以控制元素的显示外,还能定义显示元素时的效果,如显示速度
语法格式:
$(selector).show([speed],[callback]);
参数 | 说明 |
---|---|
speed | 可选,规定元素从隐藏到完全可见的速度,默认为0。可能值:毫秒,slow,normal,fast。在设置速度的情况下,元素从隐藏到完全可见的过程中,会逐渐地改变高度,宽度,外边距,内边距和透明度 |
callback | 可选,show函数执行完后要执行的函数 |
hide()与show()方法相反,参数也是一样,常成对使用。
二,切换元素可见状态
复合事件中的toggle() 方法,除了可以模拟鼠标的连续单击事件外,还能用于切换元素的可见状态,如果元素可见,单击切换后隐藏元素
关键代码:
<script type="text/javascript">
$(document).ready(function(){
$("input[name=more_btn]").click(function(){
$("li:gt(5):not(:last)").toggle();
});
});
</script>
<ul>
<li><a href=" ">某某</a></li>
.........
<li class="btn">
<input name="more_btn" type="button" value="展开或关闭菜单项"/>
</li>
</ul>
从代码运行效率考虑,使用toggle()方法替代show()和hide()方法制作轮流切换元素的可见状态,更好。
比如京东的鼠标悬浮到一级菜单时,二级菜单显示,鼠标离开,二级菜单消失
关键代码
index=$(".inner-box").index($(this));//获取当前悬浮的index值
$(".erji-box div").eq(index).show(); //让相应二级内容显示
$(".erji-box div").eq(index).siblings().hide(); //所有相应二级的同辈元素隐藏
二, 控制元素淡入和淡出
fadeIn()方法控制元素淡入
$(selector).fadeIn([speed],[callback]);
参数和上面一样
fadeOut()方法控制元素淡出
切换元素出入状态
切换元素的淡入淡出状态的方法——fadeToggle()方法,如果元素已经淡出,fadeToggle()会向元素添加淡入效果,如果元素已经淡入,会向元素添加淡出效果,用法与toggle()相同。
注意:jQuery中所有动画效果,都可以设置slow,normal,fast(0.6秒,0.4秒和0.2秒),这些要用双引号括起来,如fadeIn(“normal”),而使用时间数值作为速度参数,不需要使用双引号。时间数值单位为毫秒。
三, 控制元素滑动
slideDown(),slideUp()参数和上面一致,常用于选项卡,下拉菜单和提示信息等
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("normal");
});
});
</script>
<div class="panel">
<p>........</p>
<p>........</p>
<p>........</p>
</div>
<p class="flip">............</p>
同样也存在一个slideToggle()方法
四, 自定义动画
animate()用来创建自定义动画
$(selector).animate({params},speed,callback);
params必选,定义形成动画的CSS属性
后面的两个参数和前面的一样