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.form.js异步提交表单详解
Apr 25 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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版本号
2006/10/09 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
python的类方法和静态方法
2014/12/13 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
手术室护士节演讲稿
2014/08/27 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
创先争优个人总结
2015/03/04 职场文书
2016高考冲刺决心书
2015/09/23 职场文书