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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery实现聊天对话框
Feb 08 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
PHP以及MYSQL日期比较方法
2012/11/29 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
Python实现的简单发送邮件脚本分享
2014/11/07 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python常用知识点汇总
2016/05/08 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
职业生涯规划书范文
2014/03/10 职场文书
中学生寄语大全
2014/04/03 职场文书
经济管理专业求职信
2014/06/09 职场文书
生活小常识广播稿
2014/09/16 职场文书
财务人员入职担保书
2015/09/22 职场文书