• jQuery学习之旅 Item9 动画效果


    1、元素的显示和隐藏

    • display:none; 隐藏
    • display:block; 显示

    简单显示和隐藏方法

    • a) show() 显示
    • b) hide() 隐藏
    • c) toggle() 开关,显示则隐藏,隐藏则显示
    <script type="text/javascript">
        function f1(){
            //隐藏
            $("div").hide();//display:none
            //document.getElementById('id').style.display="none";
        }
        function f2(){
            //显示
            $("div").show();//display:block
        }
        function f3(){
            $("div").toggle();
        }
    </script>
    <style type="text/css">
         div {width:300px; height:200px; background-color:blue;}
    </style>
     <body>
         <div>duck and dog</div>
          <input type="button" value="隐藏" onclick="f1()" />
          <input type="button" value="显示" onclick="f2()" />
          <input type="button" value="开关效果" onclick="f3()" />
    </body>

    CSS支持两种方法显示和隐藏元素,即使用visibility或display样式,他们控制元素显示和隐藏的时候效果相同,但是结果却不同。
    具体说明如下:

    • visibility 属性在隐藏元素的时候,同时会保存元素在文档流中的影响力,隐藏后元素的未知保持不变。该属性包括visible(默认)和hidden两个值。
    • display 隐藏后,隐藏的元素不再占用文档的位置。

    2、滑动效果显示和隐藏

    • slideUp(speed[,callback]) 向上滑动元素并最终隐藏
    • slideDown(speed[,callback]) 向下滑动元素并最终显示
    • slideToggle(speed[,callback])
      • speed:设置效果的速度(slow(600)normal(400) fast(200) 时间(毫秒))
      • callback: 效果执行完毕之后自动调用的回调函数
    <script type="text/javascript">
        function f1(){
            //隐藏
            $("div").slideUp(3000,function(){
                alert('我消失了,你能看到么');
            });
        }
        function f2(){
            //显示
            $("div").slideDown(3000,function(){
                alert('我又回来了');
            });//display:block
        }
        function f3(){
            $("div").slideToggle(1000);
        }
        $(function(){
            //气缸滑动效果
            //setInterval("f3()",1000);
        });
    </script>
    
    <style type="text/css">
    div {width:300px; height:200px; background-color:blue;}
    </style>
    
    
    <body>
         <div>duck and dog</div>
         <input type="button" value="隐藏" onclick="f1()" />
         <input type="button" value="显示" onclick="f2()" />
         <input type="button" value="开关效果" onclick="f3()" />
     </body>

    3、淡入淡出效果

    让元素通过一定透明度变化,达到显示和隐藏的效果

    • fadeIn(speed, [callback])
    • fadeOut(speed, [callback])
    • fadeToggle(speed, [callback])开关效果
    • fadeTo(speed, opacity, [callback]) 把div设置一定透明度(0-1)0.3就是30%透明度
    <script type="text/javascript"> 
        function f1(){
            //隐藏
            $("div").fadeOut(4000);
        }
        function f2(){
            //显示
            $("div").fadeIn(4000);
            $("#two").fadeTo(2000,0.3);
        }
    
        function f3(){
            $("div").fadeToggle(2000);
        }
    
    </script>
    <style type="text/css">
        div {width:300px; height:200px; background-color:blue;}
    </style>
    <body>
        <div id = "two">duck and dog</div>
    
        <input type="button" value="隐藏" onclick="f1()" />
        <input type="button" value="显示" onclick="f2()" />
        <input type="button" value="开关效果" onclick="f3()" />
    </body>

    设置透明度,div的透明度是30%:

    4、动画效果底层方法animate()

    show() hide() 等等动画效果内部都是执行animate()方法

    $().animate(css效果参数[,时间][,回调函数]);

    css()等一般jquery方法执行完毕之后会返回当前jquery对象,因此jquery的许多方法可以链式调用。

     <script type="text/javascript">
        function f1(){
            //文字大小、文字粗体、div本身宽度和高度
            //font-size  background-color  color
    
            console.log($("div"));
            //jquery对象调用完毕css方法本身还是一个jquery对象
            //说明css方法执行完毕有return this关键字
            console.log($("div").css('font-weight','bold').css("background-color",'pink')); 
    
            var jn = {'font-size':'30px','400px',height:'300px'};
            $("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);
    
            //$("div").animate(jn,2000);
        }
    
    </script>
    
    <style type="text/css">
        div {width:300px; height:200px; background-color:blue; }
    </style>
    
    <body>
        <div>duck and dog</div>
        <input type="button" value="设置" onclick="f1()" />
    </body>

    5、累加累减动画

    如果动画一次设定left:500 ,第一次单击div会左移500像素,第二次单击就不会动了。累加累减就是连续动的,只需要将left:”500px”改成left:”+=500px”或者left:”-=500px”即可。

    (function(){  
        $("#panel").click(function(){  
           $(this).animate({left: "+=500px"}, 3000);  
        })  
    })</span>  

    6、多重动画

    1、同时执行多个动画
    上面的例子只控制了left属性的变化,这回我们在控制left属性的时候同时控制元素高度变为200px

    $(function(){  
        $("#panel").click(function(){  
           $(this).animate({left: "500px",height:"200px"}, 3000);  
        })  
    })

    2、顺序执行动画

    上面例子中元素右移和放大高度两个动画是同时进行的。现在我们要实现先右移再放大高度,那很简单,只需要把上面的animate()方法拆开写成两个即可

    $(function(){  
        $("#panel").click(function(){  
           $(this).animate({left: "500px"},3000)  
                  .animate({height:"200px"},1000);  
        })  
    })  

    3、综合动画

    接下来完成更复杂的动画。单击div元素后让他向右移动的同时增大他的高度,并将它的不透明度从50%切换到100%。然后再让它从上向下移动,同时它的宽度变大,当完成这
    些效果后让它以淡出的方式隐藏掉。

    
    $(function(){  
        $("#panel").css("opacity",0.5);//设置不透明度  
        $("#panel").click(function(){  
           $(this).animate({left: "400px",height:"200px",opacity:"1"},3000)  
                  .animate({top:"200px","200px"},3000)  
                  .fadeOut(1000);  
        })  
    }) 

    7、动画回调函数

    在上例中,如果想在最后一步切换css样式而不是隐藏元素。这我们就可以用到animate的第三个参数回调函数了

    $(function(){  
        $("#panel").css("opacity",0.5);//设置不透明度  
        $("#panel").click(function(){  
           $(this).animate({left: "400px",height:"200px",opacity:"1"},3000)  
                  .animate({top:"200px","200px"},3000,function(){$(this).css("border","5px solid blue")});  
    
        })  
    }) 

    这样就把css方法加入到动画队列中了。

    8、停止动画和判断是否处于动画状态

    1、停止元素的动画

    stop([clearQueue][,gotoEnd]) 两个都是可选参数,都是boolean类型
    参数说明:

    • clearQueue:代表是否清空未执行完的动画队列
    • gotoEnd :代表是否将正在执行的动画跳到末状态

    通过一个综合的示例就可以弄明白stop()方法的这两个参数了:

    
    <style type="text/css">  
        *{margin:0;padding:0;}    
        body { font-size: 13px; line-height: 130%; padding: 60px }  
        #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}  
        .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}  
        .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}  
    </style>  
    <script src="../../../scripts/jquery.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(function(){  
              $("button:eq(0)").click(function () {  
                  $("#panel")  
                    .animate({height : "150" } , 2000 )  
                    .animate({width : "300" } , 2000 )  
                    .hide(3000)  
                    .animate({height : "show" , width : "show" , opacity : "show" } , 2000 )  
                    .animate({height : "500"} , 2000 );  
              });  
              $("button:eq(1)").click(function () {  
                  $("#panel").stop();//停止当前动画,继续下一个动画  
              });  
              $("button:eq(2)").click(function () {  
                  $("#panel").stop(true);//清除元素的所有动画  
              });  
              $("button:eq(3)").click(function () {  
                  $("#panel").stop(false,true);//让当前动画直接到达末状态 ,继续下一个动画  
              });  
              $("button:eq(4)").click(function () {  
                  $("#panel").stop(true,true);//清除元素的所有动画,让当前动画直接到达末状态   
              });  
    
        })  
    </script>  
    
    <body>  
        <button>开始一连串动画</button>  
        <button>stop()</button>  
        <button>stop(true)</button>  
        <button>stop(false,true)</button>  
        <button>stop(true,true)</button>  
        <div id="panel">  
            <h5 class="head">三国杀杀天下</h5>  
            <div class="content">  
                夏侯惇的眼睛,陆逊的联营,郭嘉司马深深的基情  
            </div>  
        </div>  
    </body>  
    </html>

    2、判断元素是否处于动画状态

    当使用animate()方法的时候,要避免动画的累积导致的动画与用户的行为不一致的现象。当用户快速在某个元素上执行animate()动画时,就会出现动画累积。

    解决办法是判断元素是否正在处于动画状态,当不处于动画状态的时候,才为元素添加新的动画。
    用法:

    if(!$(element).is(":animated")){  
        //添加新的动画  
    }

    版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226

  • 相关阅读:
    SQLServer控制用户访问权限表
    jQuery 增加 删除 修改select option .
    C# Socket编程笔记
    前端笔记知识点整合之JavaScript(二)关于运算符&初识条件判断语句
    推荐一款中国风React组件
    Linux命令
    不要总想着二进制
    React 中阻止事件冒泡的问题
    [技术] 如何正确食用cnblogs的CSS定制
    新手如何理解JS面向对象开发?
  • 原文地址:https://www.cnblogs.com/dingxiaoyue/p/4948187.html
Copyright © 2020-2023  润新知