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.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.haodaima.com/code/HtmlJsRun

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

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

以上就是JQuery animate动画应用示例。宇宙之所以宏大,不禁于它叫宇宙,由于它是宇宙。更多关于JQuery animate动画应用示例请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
jquery ajax实现文件上传功能实例代码

SpringMVC+Jquery实现Ajax功能

关于二次封装jquery ajax办法示例详解

ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)

jQuery Ajax的readyState和status的区别和使用详解