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>
  • 相关阅读:
    Mysql初探:内存数据刷盘机制
    数据管理流程,基础入门简介
    数据分析:复杂业务场景下,量化评估流程
    架构设计:服务自动化部署和管理流程
    Hadoop框架:MapReduce基本原理和入门案例
    架构设计:微服务模式下,实现灰度发布模式
    架构设计:分布式结构下,服务部署发布
    编码风格:Mvc模式下SSM环境,代码分层管理
    开发工具:Mybatis.Plus.插件三种方式的逆向工程
    Hadoop框架:HDFS高可用环境配置
  • 原文地址:https://www.cnblogs.com/tangcaiye/p/3573733.html
Copyright © 2011-2022 走看看