1.show方法
jQuery中用来显示已经被隐藏的元素的方法是使用show(speed,[callback])函数。
数名 | show(speed,[callback]) |
作用 | 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度 |
返回值 | jQuery |
参数 | speed (String,Number):三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000) callback (Function):在动画完成时执行的函数,每个元素执行一次。 |
例如:将display值为none的tr显示出来
js:
$("tr:hidden").show();
html:
<tr style="display: none;"><th>Header</th></tr>
2.toggle方法
jQuery中用于实现交替显示隐藏的函数是toggle(speed,[callback]) 。
例如:
css:
.d1{
color: #f00;
font-family: "楷体";
font-size: 16px;
}
js:
$("#btn3").click(function(){
$("div").toggleClass("d1");
});
html:
<input type="button" id="btn3" value="添加删除样式" />
3.dlideUp向上收缩效果
所谓向下收缩效果就是对页面元素通过高度变化来动态地隐藏。在jQuery中实现该效果的函数是slideUp(speed,[callback]) 。
例如:
js:
$("#d1").bind("click",function(){
$("#menu1").slideUp();
});
4.slideDown
jQuery中用于实现向上滑动展开元素内容的函数为slideDown(speed,[callback]) 。
js:
$("#d2").click(function(){
//向上展开
$("#menu2").slideDown();
});
5.slideToggle
交替伸缩样式和交替显示隐藏类似,都是当用户单击时,如果操作的页面元素是显示状态,则将其隐藏,如果其是隐藏的,则将其显示出来。只不过这里显示的动画效果是向上或者向下滑动。jQuery中处理交替伸缩样式的函数是slideToggle(speed,[callback]) 。
js:
$("#d3").click(function(){
//自动展开或收缩
$("#menu3").slideToggle(); });
3.4.5使用一个表格实现效果的展示:
<table cellspacing="" cellpadding="">
<tr align="center">
<td width="150px" id="d1">Data</td>
<td width="150px" id="d2">Data</td>
<td width="150px" id="d3">Data</td>
</tr>
<tr >
<td width="150px">
<ul id="menu1">
<li>javaweb</li>
<li>c++</li>
<li>javascript</li>
</ul>
</td>
<td width="150px">
<ul id="menu2">
<li>javaweb</li>
<li>c++</li>
<li>javascript</li>
</ul>
</td>
<td width="150px">
<ul id="menu3">
<li>javaweb</li>
<li>c++</li>
<li>javascript</li>
</ul>
</td>
</tr>
</table>
6.淡入效果
淡入效果是指页面上元素的透明度不断减小,直到清晰显示出来的效果。在jQuery中实现淡入效果使用fadeIn(speed,[callback])函数。
js:
$("#btn1").click(function(){
//淡入效果
$("#d1").fadeIn(1000);
});
7.fadeOut
淡出效果是指页面上元素的透明度不断增大,直到消失不见的效果。jQuery中处理淡出效果的是fadeOut(speed,[callback])函数。
js:
$("#btn2").click(function(){
//淡出效果
$("#d1").fadeOut(1000);
});
8.fadeToggle
交替实现淡出淡入
js:
$("#btn3").click(function(){
//淡出或淡出
$("#d1").fadeToggle(1000);
});
css:
<input type="button" id="btn1" value="淡入" />
<input type="button" id="btn2" value="淡出" />
<input type="button" id="btn3" value="淡出或淡出" />
<div id="d1">
<img src="img/图片1.png"/>
</div>