Jquery入门学习第三篇

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的情况. 比如希望一段文字第一次单击显示弹出层, 第二次单击隐藏弹出层.

我们将开篇实例稍作修改即可实现这个效果:

 

 

 

      

 

      

 

      

        $(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);  

 

            });  

        });  

      

 

 

 

    

 

          

        提示文字  

    

 

          

      

    

        width: 300px; height: 100px;">  

        弹出层