zoukankan      html  css  js  c++  java
  • jquery.easing的使用

    下载地址:http://www.jb51.net/jiaoben/32922.html

    基本语法:easing:格式为json,{duration:持续时间,easing:过渡效果,complete:成功后的回调函数}

    介绍:easing是jquery的一个插件,使用它可以创建更加绚丽的动画效果。

    环境:因为easing是jQuery的插件,所以必须是在引入jquery之后再引入它,如下:

    <script type="text/javascript" src="jquery-1.11.0.js"></script>
    <script type="text/javascript" src="jquery.easing.min.js"></script>
    

    使用:

    easing是基于animate这个函数,animate的语法:animate(params,speed,easing,fn);

    params:一组包含作为动画属性和终值的样式属性和及其值的集合,必须为json格式

    speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

    easing:过渡效果名称,默认jquery只提供"linear" 和 "swing",默认过渡效果是"swing"

    fn:动画完成时执行的函数

    如果在没引入easing的情况下如果想改变元素的left:

    html:

    <div style="100px; height:100px; background-color:#ccc; position:absolute; left:20px;"></div>
    

    jquery代码:

    $(function (){
        $(document).click(function (){
            $("div").animate({left: "300px"}, 1000,"linear",function (){
                alert('a');
            });
        });
    });

    在引入easing之后animate语法:animate(params,easing)

    params:一组包含作为动画属性和终值的样式属性和及其值的集合,必须为json格式

    easing:格式为json,{duration:持续时间,easing:过渡效果,complete:成功后的回调函数}

    例子:同样改变left值

    html:

    <div style="100px; height:100px; background-color:#ccc; position:absolute; left:20px;"></div>

    jquery:

    $(function (){
        $(document).click(function (){
            $("div").animate({left: "300px"},{
                duration:1000,
                easing:"easeOutBounce",
                complete:function (){
                    alert("动画完成");
                }
            });
        });
    });

    完整代码:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.11.0.js"></script>
    <script type="text/javascript" src="jquery.easing.min.js"></script>
    <script type="text/javascript">
    $(function (){
        $(document).click(function (){
            $("div").animate({left: "300px"},{
                duration:1000,
                easing:"easeOutBounce",
                complete:function (){
                    alert("动画完成");
                }
            });
        });
    });
    </script>
    </head>
    <body>
    <div style="100px; height:100px; background-color:#ccc; position:absolute; left:20px;"></div>
    </body>
    </html>
  • 相关阅读:
    python每日作业4/21
    socket实现并发之socketserver模块的使用
    python socket粘包问题的解决
    每日作业:4/20
    网络编程基础(socket)
    网络基础之网络协议
    异常处理
    python 作业4/15
    centos7简单安装配置mariadb
    Centos7下Firewalld防火墙配置命令
  • 原文地址:https://www.cnblogs.com/tangcaiye/p/3573733.html
Copyright © 2011-2022 走看看