JQuery animate動畫應用示例

更新時間：2019年05月14日 09:16:16 作者：SpecYue

這篇文章主要介紹了JQuery animate動畫應用,結(jié)合具體實例形式分析了jQuery使用animate動畫實現(xiàn)選項卡及樣式動態(tài)變化相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了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');//可以用鏈式調(diào)用
        $(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的內(nèi)容</div>
      <div>選項卡2的內(nèi)容</div>
      <div>選項卡3的內(nèi)容</div>
    </div>
  </div>
</body>
</html>

將slides下面的div由隱藏改為浮動，將cons設(shè)置成絕對定位，將slides改為相對定位。超過cons的slides隱藏。
點擊事件發(fā)生之后，相對定位改變。

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大小，完成之后用回調(diào)函數(shù)彈出done

感興趣的朋友可以使用如下工具測試上述代碼運行效果：

在線HTML/CSS/JavaScript代碼運行工具：
http://tools.jb51.net/code/HtmlJsRun

在線HTML/CSS/JavaScript前端代碼調(diào)試運行工具：
http://tools.jb51.net/code/WebCodeRun

更多關(guān)于jQuery相關(guān)內(nèi)容還可查看本站專題：《jQuery動畫與特效用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: