jquery 动画学习基础1
jQuery的动画函数主要分为三类:
- 基本动画函数: 既有透明度渐变, 又有滑动效果. 是最常用的动画效果函数.
- 滑动动画函数: 仅使用滑动渐变效果.
- 淡入淡出动画函数: 仅使用透明度渐变效果.
这三类动画函数效果各不相同, 用法基本一致. 大家可以自己尝试.
另外也许上面的三类函数效果都不是我们想要的, 那么jQuery也提供了自定义动画函数, 将控制权放在我们手里让我们自己定义动画效果.
下面对三类内置动画函数和自定义动画函数分别讲解.
基本动画函数 Basics
| 名称 | 说明 | 举例 |
| show( ) | 显示隐藏的匹配元素。 这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。 |
显示所有段落: |
| show( speed, [callback]) | 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。 |
用缓慢的动画将隐藏的段落显示出来，历时600毫秒: $("p").show(600); |
| hide( ) | 隐藏显示的元素 这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。 |
隐藏所有段落: |
| hide( speed, [callback] ) | 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。 |
用600毫秒的时间将段落缓慢的隐藏: $("p").hide("slow"); |
| toggle( ) | 切换元素的可见状态。 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 |
切换所有段落的可见状态: $("p").toggle() |
| toggle( switch ) | 根据switch参数切换元素的可见状态（ture为可见，false为隐藏）。 如果switch设为true，则调用show()方法来显示匹配的元素，如果switch设为false则调用hide()来隐藏元素。 |
切换所有段落的可见状态: var flip = 0; |
| toggle( speed, [callback] ) | 以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发一个回调函数。 可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。 |
用200毫秒将段落迅速切换显示状态，之后弹出一个对话框: |
1. 使用基本动画函数
基本的动画函数主要分为show, hide和toggle三个. 都提供了无参数的版本, 表示不适用动画切换元素的显示状态:
$("#divPop").show();$("#divPop").hide();$("#divPop").toggle();
都提供了两个参数的重载, 因为回调函数可以省略, 所以可以像开篇实例中使用的, 传入一个数值作为唯一参数, 则会在参数规定的时间内用动画效果显示/隐藏元素:
$("#divPop").show(200);$("#divPop").hide("fast");$("#divPop").toggle("slow");
如果传递了200, 表示图层会在200毫秒内通过渐变的形式显示出来. speed参数可以使用三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000).
三个函数都可以传入回调函数callback,签名如下:
function callback() { this; // dom element}
在回调函数中的this是执行此函数的DOM对象. 会在动画结束时执行.2. 使用toggle函数
toggle函数是功能更强大的函数, 可以切换元素的可见状态. 我们经常遇到需要使用toggle的情况. 比如希望一段文字第一次单击显示弹出层, 第二次单击隐藏弹出层.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>jQuery Animation - Toggle </title>
- <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>
- <script type="text/javascript"> $(document).ready(function() {
- //动画速度
- var speed = 500;
- //绑定事件处理
- $("#btnShow").click(function(event) { //取消事件冒泡
- event.stopPropagation();
- //设置弹出层位置
- var offset = $(event.target).offset(); $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
- //切换弹出层的显示状态
- $("#divPop").toggle(speed); }); }); </script>
- </head>
- <body>
- <div>
- <br /><br /><br />
- <button id="btnShow">提示文字</button>
- </div>
- <!-- 弹出层 -->
- <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;">
- <div style="text-align: center;">弹出层</div>
- </div>
- </body>
- </html>
toggle()函数可以传递一个boolean值的参数, 比如: toogle(true)等同于show(), toogle(fasle)等同于hide().
三. 滑动动画函数
基本动画函数的效果是一个综合了滑动和透明度渐变的函数, jQuery还单独提供了只有滑动效果的相关函数.滑动动画函数 Sliding
| 名称 | 说明 | 举例 |
| slideDown(speed, [callback]) | 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。 |
用600毫秒缓慢的将段落滑下: $("p").slideDown("slow"); |
| slideUp(speed, [callback]) | 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。 | 用600毫秒缓慢的将段落滑上: $("p").slideUp("slow"); |
| slideToggle(speed, [callback]) | 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。 | 用600毫秒缓慢的将段落滑上或滑下: $("p").slideToggle("slow"); |
slideDown就是show的滑动效果版本, slideUp就是hide的滑动效果版本, slideToggle就是toggle的滑动效果版本.
参数完全相同:
$("#divPop").slideDown(200);$("#divPop").slideUp("fast");$("#divPop").slideToggle("slow");