• 端午小长假 歌舞飞扬“剧”精彩 2019-11-25
  • 滴滴计划恢复部分夜间时段订单  2019-11-21
  • 高级需求不是物质需求,而是精神需求。你可能理解不了,为什么方志敏们面对高官,厚禄的诱惑而其志不改。 2019-11-21
  • 北京市北京达世行世纪4S店【在线咨询】 2019-11-13
  • 新车图解:奥迪Q8 我,即是未来 2019-11-10
  • 图解:世界杯,跟着大数据燥起来! 2019-11-10
  • 农业农村部2017年返乡下乡双创人员达740万人 2019-11-10
  • 谋求共同发展的强大动力(钟声) 2019-11-10
  • 热刺孙兴慜领衔 “太极虎”能否逢凶化吉猛虎出山 2019-11-09
  • 首届妈祖信俗“立德”论坛成功举办 2019-11-03
  • “辅警碰瓷执法”是出于职业的无奈? 2019-11-03
  • 紫光阁中共中央国家机关工作委员会 2019-11-02
  • 习近平:在同全国劳动模范代表座谈时的讲话 2019-11-02
  • 中国女排不能有多余想法 摆正位置冲击奥运佳绩 2019-11-01
  • 端午话药浴:探秘藏东山谷里的藏药浴 2019-10-31
  • 网上特码资料大全96期

     找回密码
     马上注册

    QQ登录

    只需一步,快速开始

    扫一扫,访问微社区

    分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

    HttpHelper万能框架(V2.3-含.netcore) HttpHelper官方出品,无敌框架讨论区 - 源码下载 - 在线测试和代码生成

    HttpHelper爬虫类(V2.0) 最牛的爬虫类,没有爬不到只有想不到 源码 - 代码生成器 - 讨论区 - 教程- 例子

    查看: 639|回复: 4
    打印 上一主题 下一主题

    香港马会特码资料总刚: [零基础学习web前端] 【零基础学习web前端】jQuery 效果- 动画

    [复制链接]
    跳转到指定楼层
    楼主
    发表于 2019-1-16 16:23:41 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    【零基础学习web前端】jQuery 效果- 动画

    【零基础学习web前端】教程目录导航


    jQuery 动画 - animate() 方法
    jQuery animate() 方法用于创建自定义动画。
    语法:
    $(selector).animate({params},speed,callback);
    必需的 params 参数定义形成动画的 CSS 属性。
    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
    可选的 callback 参数是动画完成后所执行的函数名称。
    下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素:
    [JavaScript] 纯文本查看 复制代码
     网上特码资料大全96期 www.iieaf.tw $("button").click(function(){
      $("div").animate({left:'250px'});
    });

    注意:
    默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。
    如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

    jQuery animate() - 操作多个属性
    生成动画的过程中可同时使用多个属性:
    [JavaScript] 纯文本查看 复制代码
    $("button").click(function(){
      $("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
      });
    });

    jQuery animate() - 使用相对值
    也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
    [JavaScript] 纯文本查看 复制代码
    $("button").click(function(){
      $("div").animate({
        left:'250px',
        height:'+=150px',
        width:'+=150px'
      });
    });

    jQuery animate() - 使用预定义的值
    可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
    [JavaScript] 纯文本查看 复制代码
    $("button").click(function(){
      $("div").animate({
        height:'toggle'
      });
    });

    jQuery animate() - 使用队列功能
    默认地,jQuery 提供针对动画的队列功能。
    这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
    [JavaScript] 纯文本查看 复制代码
    $("button").click(function(){
      var div=$("div");
      div.animate({height:'300px',opacity:'0.4'},"slow");
      div.animate({width:'300px',opacity:'0.8'},"slow");
      div.animate({height:'100px',opacity:'0.4'},"slow");
      div.animate({width:'100px',opacity:'0.8'},"slow");
    });

    下面的例子把 <div> 元素往右边移动了 100 像素,然后增加文本的字号:
    [JavaScript] 纯文本查看 复制代码
    $("button").click(function(){
      var div=$("div");
      div.animate({left:'100px'},"slow");
      div.animate({fontSize:'3em'},"slow");
    });


    沙发
    发表于 2019-1-16 16:27:30 | 只看该作者
    板凳
    发表于 2019-1-16 17:04:45 | 只看该作者
    地板
    发表于 2019-1-16 17:50:12 | 只看该作者
    5
    发表于 2019-1-17 14:20:09 | 只看该作者
    您需要登录后才可以回帖 登录 | 马上注册

    本版积分规则

    QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|网上特码资料大全96期 ( 豫ICP备17001017号-1)

    GMT+8, 2019-12-12 00:51

    © 2017-2018

    快速回复 网上特码资料大全96期 返回列表
  • 端午小长假 歌舞飞扬“剧”精彩 2019-11-25
  • 滴滴计划恢复部分夜间时段订单  2019-11-21
  • 高级需求不是物质需求,而是精神需求。你可能理解不了,为什么方志敏们面对高官,厚禄的诱惑而其志不改。 2019-11-21
  • 北京市北京达世行世纪4S店【在线咨询】 2019-11-13
  • 新车图解:奥迪Q8 我,即是未来 2019-11-10
  • 图解:世界杯,跟着大数据燥起来! 2019-11-10
  • 农业农村部2017年返乡下乡双创人员达740万人 2019-11-10
  • 谋求共同发展的强大动力(钟声) 2019-11-10
  • 热刺孙兴慜领衔 “太极虎”能否逢凶化吉猛虎出山 2019-11-09
  • 首届妈祖信俗“立德”论坛成功举办 2019-11-03
  • “辅警碰瓷执法”是出于职业的无奈? 2019-11-03
  • 紫光阁中共中央国家机关工作委员会 2019-11-02
  • 习近平:在同全国劳动模范代表座谈时的讲话 2019-11-02
  • 中国女排不能有多余想法 摆正位置冲击奥运佳绩 2019-11-01
  • 端午话药浴:探秘藏东山谷里的藏药浴 2019-10-31
  • 重庆时时彩开奖记录 浙江20选5胆拖计算器 全天五分彩骗局 雷速网球比分怎么收费 九州彩票安卓 怎么在微博上发文章赚钱是真的吗 今天30选5开奖公告 金沙国际棋牌下载官网 重庆百变王牌电脑走势 足球手抄报图片五年级