jQuery特效与动画 最常见的特效就是就是隐藏和显示元素或者的区块。 function one(){$('button').toggle(function(){$('p').hide(1000);}
jQuery特效与动画
最常见的特效就是就是隐藏和显示元素或者的区块。
function one(){ $('button').toggle(function(){ $('p').hide(1000); },function(){ $('p').show(1000); }); }//如果hide不加参数,就直接消失，不然就毫秒时间内消失，有参数是是不断设置height/width的数值变小//html页面<html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/effect.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/effect.js"></script> </head> <body> <button>click</button> <p>虎扑体育6月6日讯 勇士队主场110-77战胜了骑士队</p> </body></html>用css样式也是可以实现hide()和show()的效果:
function two(){ $('button').toggle(function(){ $('p').css("display","none"); },function(){ $('p').css("display","block"); }); }display 可能取得值
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | 此元素会根据上下文作为块级元素或内联元素显示。 |
| marker | |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
淡入和淡出
function three(){ $('button').toggle(function(){ $('p').fadeOut(1000); },function(){ $('p').fadeIn(1000); });}创建自定义动画
animate()方法有两种形式，创建自定义的动画。
第一种一起发生：animate({xx1:'value'，xx2:'value'},easing,function(){xxxx});
function four(){ var pos='-150'; $('button').click(function(){ $('p').animate({ bottom: pos+"px"}, 1000,function(){ pos-=50; }); }); }第二种排队动画效果:animate({xx1:'value'，xx2:'value'},{duration:'value',easing:'value',complete:function(){},queue:boolean,step:callback});
当对一个元素有很多个动画的时候，当需要动画一个一个动作发生时：
//当queue: 为true 时，就一个一个排队发生，为false的时候就同时发生。function five(){ var pos='-150'; $('button').click(function(){ $('p').animate({ bottom: pos+"px"}, {duration:1000,queue:false}).fadeTo(1000,0.5); }); }//定多个动画function five(){ var pos='-150'; $('button').click(function(){ $('p').animate({ bottom: pos+"px"}, {duration:1000,queue:true}) .animate({ height:"+=20px"}, 1000) .fadeTo(1000,0.5); }); }//queue用法function five(){ var pos='-150'; $('button').click(function(){ $('p').animate({ bottom: pos+"px"}, {duration:1000,queue:true}) .fadeTo(1000,0.5) .queue(function(){ $('p').css('background-color','royalblue') .dequeue(); }); }); }直接动画效果的方法：
jQuery 效果函数
| 方法 | 描述 |
|---|---|
| animate() | 对被选元素应用“自定义”的动画 |
| clearQueue() | 对被选元素移除所有排队的函数（仍未运行的） |
| delay() | 对被选元素的所有排队函数（仍未运行）设置延迟 |
| dequeue() | 运行被选元素的下一个排队函数 |
| fadeIn() | 逐渐改变被选元素的不透明度，从隐藏到可见 |
| fadeOut() | 逐渐改变被选元素的不透明度，从可见到隐藏 |
| fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
| hide() | 隐藏被选的元素 |
| queue() | 显示被选元素的排队函数 |
| show() | 显示被选的元素 |
| slideDown() | 通过调整高度来滑动显示被选元素 |
| slideToggle() | 对被选元素进行滑动隐藏和滑动显示的切换 |
| slideUp() | 通过调整高度来滑动隐藏被选元素 |
| stop() | 停止在被选元素上运行动画 |
| toggle() | 对被选元素进行隐藏和显示的切换 |
把效果函数列出来的原因是因为，jquery的每个效果函数都可以有一个回调函数，可以自己实现一些同时方法，修改一些属性。
