JQuery基础之(七)jQuery动画处理-CFANZ编程社区

一、前言

本文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.

开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单!

二、基本动画函数——从实例开始

<headrunat="server">
    <title>动画</title>
    <script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script>
    <script type="text/javascript">
        $(function(){
            //绑定按钮的click事件
            $("#btnShow").bind("click", function(event){
                event.preventDefault();    //阻止按钮的默认事件执行
                event.stopPropagation();    //阻止事件冒泡，如果不阻止则事件会一层层的被捕获
                var offset = $(event.target).offset();  //获取激发事件的对象的偏移对象
                $("#divPop").css("top", offset.top + $(event.target).height())
                            .css("left", offset.left)
                            .css("width", $(event.target).width())
                            .show("slow");
            });
            
            $(document).bind("click", function(){$("#divPop").hide(3000);});  //点击页面的空白地方，则隐藏弹出div，整个过程为三秒钟
            
            $("#divPop").bind("click", function(event){event.stopPropagation();});  //阻止在点击弹出div时被下层对象捕获到
        });
    </script>
</head>
<bodyid="bbb">
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnShow" runat="server" Text="显   示"/>
        <!-- 弹出层 -->
        <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>
    </div>
    </form>
</body>

基本动画函数

上例中使用的show()和hide()是我们使用最多的基本动画函数，下面是jQuery的基本动画函数:

名称	说明	举例
show( )	显示隐藏的匹配元素。这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。	显示所有段落: $("p").show()
show( speed, [callback])	以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。	用缓慢的动画将隐藏的段落显示出来，历时600毫秒: $("p").show(600);
hide( )	隐藏显示的元素这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。	隐藏所有段落: $("p").hide()
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; $("button").click(function () { $("p").toggle( flip++ % 2 == 0 ); });
toggle( speed, [callback] )	以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中，padding和margin也会有动画，效果更流畅。	用200毫秒将段落迅速切换显示状态，之后弹出一个对话框: $("p").toggle("fast",function(){ alert("Animation Done."); });

上面个参数的speed参数可为：slow、fast或具体的数值，单位是毫秒

三、滑动动画函数——从实例开始

基本动画函数的效果是一个综合了滑动和透明度渐变的函数, jQuery还单独提供了只有滑动效果的相关函数.

$("#divPop").slideDown(200); //用于显示时

$("#divPop").slideUp("fast"); //用于隐藏时

$("#divPop").slideToggle("slow"); //用于切换时

基本滑动函数：

名称	说明	举例
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");

上面个参数的speed参数可为：slow、fast或具体的数值，单位是毫秒

四、淡入淡出函数——从实例开始

淡出淡出函数只提供透明度渐变的效果.

$("#divPop").fadeIn(200); //用于显示时

$("#divPop").fadeOut("fast"); //用于隐藏时

$("#divPop").fadeTo(0, 0.66); //淡到指定的透明度，第一个参数为speed、第二个参数为透明度

基本淡入淡出函数：

名称	说明	举例
fadeIn( speed, [callback] )	通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。	用600毫秒缓慢的将段落淡入: $("p").fadeIn("slow");
fadeOut( speed, [callback] )	通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。	用600毫秒缓慢的将段落淡出: $("p").fadeOut("slow");
fadeTo(speed, opacity, [callback])	把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。	用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度: $("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);