zoukankan      html  css  js  c++  java
  • jquery animate 的应用

    先看一下官方对此方法的介绍

    官方地址 http://api.jquery.com/animate/

    • .animate( properties, [duration,] [easing,] [complete] )   version added: 1.0

      properties A map of CSS properties that the animation will move toward.

      duration A string or number determining how long the animation will run.

      easing A string indicating which easing function to use for the transition.

      complete A function to call once the animation is complete.

    • .animate( properties, options )  version added: 1.0

      properties A map of CSS properties that the animation will move toward.

      options A map of additional options to pass to the method. Supported keys:

      • duration: A string or number determining how long the animation will run.(默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
      • easing: A string indicating which easing function to use for the transition.(默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
      • complete: A function to call once the animation is complete.在动画完成时执行的函数
      • step: A function to be called after each step of the animation.在动画每一步执行的函数
      • queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.(默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)
      • specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数

    一个例子

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    div
    { margin:3px; width:40px; height:40px;background-color:#FCC; display:none; text-align:right; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    </head>

    <body>
    <div id="t1">嘿嘿</div>
    <script>
    function runIt() {
    $(
    "#t1").animate({ '80%'}, "3000", "swing",function(){$("#t1").html($("#t1").width());});
    $(
    '#t1').animate({ '50%',opacity: .5},{duration:'3000',easing:"swing",
    step:
    function(now, fx) {
    var data = fx.elem.id + '---' + fx.prop + ': ' + now;
    $(
    '#t1').html(data );
    },
    complete:
    function(){
    $(
    '#t1').append('--|--complete--|--');
    }
    });
    }
    runIt();
    </script>
    </body>
    </html>

  • 相关阅读:
    [linux]在使用rsync时需要注意的小细节
    [日期工具分享][Shell]为特定命令依次传入顺序日期执行
    【API】反转输入字符(Java)
    【笔记】对自定义异常的理解(Java)
    【技巧】解决win10的1803版本下,无法收到1809推送、从而无法更新到1903版本的问题。
    【杂谈】5G有啥用?跟咱有关系么?关注那玩意儿干啥?
    【练习总结】题目:筛法遍历素数(Java)
    【练习】Java实现的杨辉三角形控制台输出
    windows系列的(xp/win7/server2003/2008/2012...)完美移植到centos7下面的虚拟机(KVM)
    模块之-os模块
  • 原文地址:https://www.cnblogs.com/mybest/p/2088313.html
Copyright © 2011-2022 走看看