UDN-企业互联网技术人气社区

板块导航

浏览  : 414
回复  : 3

[jQuery] jquery代码.动画效果

[复制链接]
genie1003的头像 楼主
发表于 2017-1-2 15:22:38 | 显示全部楼层 |阅读模式
  1. $(selector).animate({params}, speed, callback); //动画函数,参数,属性,速度(fast, slow)ms,回调;
  2. //多个效果会进队队列,并不是覆盖
  3. $(selector).stop(stopAll, goToEnd); //停止动画,参数:boolean, str
复制代码

  用处:做动画
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>动画效果</title>
  6.         <style>
  7.             .block {
  8.                 width: 100px;
  9.                 height: 100px;
  10.                 border-radius: 50%;
  11.                 background: cyan;
  12.                 font-size: 14px;
  13.                 text-align: center;
  14.                 line-height: 100px;
  15.             }
  16.         </style>
  17.     </head>
  18.     <body>
  19.         <div class="wrap">
  20.             <button class="btn-animation">动画按钮</button>
  21.             <button class="btn-stop">动画按钮</button>
  22.             <div class="block">演示动画效果</div>
  23.         </div>
  24.     </body>
  25.     <script src="../source/jquery1.11.3.min.js"></script>
  26.     <script>
  27.         $('.btn-animation').on('click', function() {
  28.             $('.block').animate({marginLeft: '150px'}, 2000);
  29.             $('.block').animate({marginTop: '150px'}, 1000); //写多个动画会依次执行,并不会覆盖
  30.         })
  31.         $('.btn-stop').on('click', function() {
  32.             $('.block').stop(true, 'goToEnd'); //参数(stopAll, goToEnd):是否停止动画队列,完成的当前的动画
  33.         })
  34.     </script>
  35. </html>
复制代码

1.gif

相关帖子

发表于 2017-1-2 15:23:09 | 显示全部楼层
jq现在应该算是最火的js框架类了吧?确实很强大extjs基于Yahoo UI的扩展,界面布局和效果方面很给力,但就是有点复杂
使用道具 举报

回复

发表于 2017-1-2 15:23:10 来自手机 | 显示全部楼层
感觉JavaScript很有前途
使用道具 举报

回复

发表于 2017-1-2 15:23:10 | 显示全部楼层
有空一起交流一下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部