主页 / 网络编程 /

JQuery animate动画应用示例

网络编程 2021-07-04 15:50www.168986.cn编程入门
这篇文章主要介绍了JQuery animate动画应用,结合具体实例形式分析了jQuery使用animate动画实现选项卡及样式动态变化相关操作技巧,需要的朋友可以参考下

本文实例讲述了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./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狼蚁网站SEO优化的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./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代码运行工具

在线HTML/CSS/JavaScript前端代码调试运行工具

更多关于jQuery相关内容还可查看本站专题《》、《》、《》、《》、《》、《》、《》及《》

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

上一篇：javascript实现遮罩层动态效果实例 下一篇：微信小程序的线程架构【推荐】

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by