JQuery animate动画应用示例


Posted in jQuery onMay 14, 2019

本文实例讲述了JQuery animate动画。分享给大家供大家参考,具体如下:

滑动选项卡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .btns input{
      width: 100px;
      height: 40px;
      background-color: grey;
      border: 0;
    }
    .btns .current{
      background-color: gold;
    }
    .cons .slides div{
      width: 500px;
      height: 300px;
      background-color: gold;
      /*display: none;!*整体都不显示了*!*/
      text-align: center;
      line-height: 300px;
      font-size: 30px;
      float: left;/*把三个div由隐藏改为浮动*/
    }
    .cons{
      width: 500px;
      height: 300px;
      overflow: hidden; /*超过cons的slide隐藏*/
      position: relative;/*相对于slide绝对定位*/
    }
    .slides{
      width: 1500px;
      height: 300px; /*把slide加长*/
      position: absolute;/*相对于cons相对定位*/
    }
    .cons .active{
      display: block;
    }
  </style>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      var $btn=$('.btns input');
      var $slides=$('.cons .slides');
      // alert($btn.length);
      // alert($div.length);
      $btn.click(function () {
        // 我点击哪一个按钮,$(this)就指的是谁,而this
        //指的是原生的,$(this)指的是JQuery的
        // $(this).siblings().removeClass('current');
        // $(this).addClass('current');//可以用链式调用
        $(this).addClass('current').siblings().removeClass('current');
        // var num=$(this).index();
        // $div.eq($(this).index()).addClass('active').sibling().removeClass('active');
        $slides.animate({left:(-500*$(this).index())});
      })
    })
  </script>
</head>
<body>
  <div class="btns">
    <input type="button" name="" value="01" class="current">
    <input type="button" name="" value="02">
    <input type="button" name="" value="03">
  </div>
  <div class="cons">
    <div class="slides">
      <div >选项卡1的内容</div>
      <div>选项卡2的内容</div>
      <div>选项卡3的内容</div>
    </div>
  </div>
</body>
</html>

将slides下面的div由隐藏改为浮动,将cons设置成绝对定位,将slides改为相对定位。超过cons的slides隐藏。
点击事件发生之后,相对定位改变。

animate动画

$div=$('#div1');
$div.animate({
  width:300,
  height:300
},1000,'swing',function () {
  alert('done');
})
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $box=$('.box');
      $box.animate({
        width:300,
        height:300
      },1000,'swing',function () {
        alert('done');
      })
    })
  </script>
  <style type="text/css">
    .box{
      width: 100px;
      height: 100px;
      background-color: gold;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

用animate动画改变box大小,完成之后用回调函数弹出done

感兴趣的朋友可以使用如下工具测试上述代码运行效果:

在线HTML/CSS/JavaScript代码运行工具:
http://tools.3water.com/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具:
http://tools.3water.com/code/WebCodeRun

更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jquery实现选项卡切换代码实例
May 14 #jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 #jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 #jQuery
JQuery特殊效果和链式调用操作示例
May 13 #jQuery
JQuery的加载和选择器用法简单示例
May 13 #jQuery
JQuery事件委托原理与用法实例分析
May 13 #jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 #jQuery
You might like
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
innerText 使用示例
2014/01/23 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
js实现转动骰子模型
2019/10/24 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python ldap实现登录实例代码
2016/09/30 Python
Python实现的矩阵类实例
2017/08/22 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
python3代码中实现加法重载的实例
2020/12/03 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
经典c++面试题三
2015/07/08 面试题
Ajax的工作原理
2015/12/04 面试题
应届生自我鉴定
2013/12/11 职场文书
音乐教学随笔感言
2014/02/19 职场文书
解除合同协议书
2014/04/17 职场文书
李培根演讲稿
2014/05/22 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
河童之夏观后感
2015/06/11 职场文书
胡桃夹子观后感
2015/06/11 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书