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 append与appendTo方法比较
May 24 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
基于jQuery实现可编辑的表格
Dec 11 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实现的替换敏感字符串类实例
2014/09/22 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
Python中运行并行任务技巧
2015/02/26 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
新书吧创业计划书
2014/01/31 职场文书
网络书店创业计划书
2014/02/07 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
保护环境建议书
2014/03/12 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
员工考勤管理制度
2015/08/06 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
python识别围棋定位棋盘位置
2021/07/26 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js