深入學習jQuery自定義動畫 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　很多情況下，前面介紹的jQuery動畫的簡單效果無法滿足用戶的各種需求，那么就需要對動畫有更多的限制，需要采取一些高級的自定義動畫來解決這些問題。本文將詳細介紹jQuery的自定義動畫animate

屬性對象

　　animate()方法的常規使用和之前介紹的3種常見動畫的使用方法類似

animate(properties[,duration][,easing][,complete])

　　animate()方法的第一個參數是一個必須參數，表示一個CSS屬性和值的對象，動畫將根據這組對象移動

　　所有用于動畫的屬性必須是數字的，除非另有說明；這些屬性如果不是數字的將不能使用基本的jQuery功能。例如，width、height或者left可以執行動畫，但是background-color不能

　　當然，除了樣式屬性，一些非樣式的屬性，如scrollTop、scrollLeft以及自定義屬性，也可應用于動畫

　　下面以元素向右移動100px為例，此時需要將元素設置為定位元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px'});
});
</script>

　　CSS簡寫屬性(如font、background、border)沒有得到充分的支持，只支持單一數值屬性

　　[注意]中劃線和小駝峰兩種形式都可以使用

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<button id="reset">恢復</button>
<div id="box" style="height: 100px;width: 300px;background-color: lightblue;border:1px solid black;">測試文字</div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn1').click(function(event){
  $('#box').animate({'border-left-width':'20px'});
});
$('#btn2').click(function(event){
  $('#box').animate({'borderLeftWidth':'20px'});
});
</script>

　　除了定義數值，每個屬性能使用'show'、'hide'和'toggle'，這些快捷方式允許定制隱藏和顯示動畫用來控制元素的顯示或隱藏

animate({opacity:'show'}) 相當于 fadeIn()
animate({opacity:'hide'}) 相當于 fadeOut()
animate({opacity:'toggle'}) 相當于 fadeToggle()
animate({opacity:'0.5'}) 相當于 fadeTo(0.5)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">Toggle1</button>
<button id="btn2">Toggle2</button>
<div id="box" style="height: 100px;width: 300px;background-color: lightblue;border:1px solid black;">測試文字</div>
<script>
$('#btn1').click(function(event){
  $('#box').animate({'opacity':'toggle'});
});
$('#btn2').click(function(event){
  $('#box').fadeToggle();
});
</script>

animate({height:'show'}) 相當于 slideDown()
animate({height:'hide'}) 相當于 slideUp()
animate({height:'toggle'}) 相當于 slideToggle()

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">Toggle1</button>
<button id="btn2">Toggle2</button>
<div id="box" style="height: 100px;width: 300px;background-color: lightblue;border:1px solid black;">測試文字</div>
<script>
$('#btn1').click(function(event){
  $('#box').animate({'height':'toggle'});
});
$('#btn2').click(function(event){
  $('#box').slideToggle();
});
</script>

　　show()、hide()、toggle()方法不添加參數時，將沒有動畫效果

animate({height:'show',width:'show',opacity:'show'}) 相當于show(400)
animate({height:'hide',width:'hide',opacity:'hide'}) 相當于hide(400)
animate({height:'toggle',width:'toggle',opacity:'toggle'}) 相當于toggle(400)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">Toggle1</button>
<button id="btn2">Toggle2</button>
<div id="box" style="height: 100px;width: 300px;background-color: lightblue;border:1px solid black;">測試文字</div>
<script>
$('#btn1').click(function(event){
  $('#box').animate({height:'toggle',width:'toggle',opacity:'toggle'}) ;
});
$('#btn2').click(function(event){
  $('#box').toggle(400);
});
</script>

　　動畫屬性也可以是一個相對值。如果提供一個以+= 或 -=開始的值，那么目標值就是以這個屬性的當前值加上或者減去給定的數字來計算的

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">增加</button>
<button id="btn2">減少</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn1').click(function(event){
  $('#box').animate({'width':'+=100'});
});
$('#btn2').click(function(event){
  $('#box').animate({'width':'-=100'});
});
</script>

　　如果第一個參數對象中存在多種值，則表示該元素將同時執行多個動畫

　　[注意]屬性值的單位默認是像素px，其他單位如em和%需要指定使用

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px','width':'100'});
});
</script>

　　如果要按照順序執行多個動畫，而不是同時執行動畫，則只需要把代碼拆開，然后按照順序寫就可以了

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px'});
  $('#box').animate({'width':'100px'});
});
</script>

可選參數

　　animate(properties[,duration][,easing][,complete])方法中除了第一個屬性對象是必需參數，其余參數都是可選參數。接下來，介紹animate()方法的可選參數

持續時間

　　animate()方法的第二個參數持續時間，用一個字符串或者數字決定動畫將運行多久。默認值為"normal"，有三種預定速度的字符串"slow"、"normal"、"fast"分別表示600ms、400ms和200ms

　　[注意]如果要自定義持續時間，需要設置為數字(如400)，而不要設置為字符串'400'，否則將不生效

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
li{text-decoration: underline; margin-top: 2px;}
</style>
<ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;">
    <li>fast</li>
    <li>normal</li>
    <li>slow</li>
    <li>100</li>
    <li>1000</li>
</ul>
<button id="reset">恢復</button>
<div id="box" style="position:relative;display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#con li').click(function(){
    var value = $(this).html();
    $('#box').animate({left:100},isNaN(Number(value)) ? value:Number(value))
})
</script>

動畫效果

　　動畫效果easing是第二個可選參數，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，其他可以使用相關的插件，其中默認值為swing

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
li{text-decoration: underline; margin-top: 2px;}
</style>
<ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;">
    <li>swing</li>
    <li>linear</li>
</ul>
<button id="reset">恢復</button>
<div id="box" style="position:relative;display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#con li').click(function(){
    $('#box').animate({'left':'200'},1000,$(this).html())
})
</script>

回調函數

　　回調函數是第三個可選參數，表示動畫完成時執行的函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px'},function(){
      alert(1);
  });
});
</script>

選項參數

　　animate()方法的另一種用法是使用選項參數options

animate(properties,options)

　　使用選項參數時，animate()方法的第一個參數仍然是屬性對象，第二個參數是一組包含動畫選項的值的集合。支持以下選項:

【1】duration(default:400)

　　duration參數表示一個字符串或者數字決定動畫將運行多久

【2】easing(default:swing)

　　easing參數表示過渡使用哪種緩動函數

【3】complete

　　complete參數表示在動畫完成時執行的函數

【4】queue(default:true)

　　queue參數表示是否將動畫放置在效果隊列中，如果為false時，將立即開始動畫

　　從jQuery1.7開始，該項也可以接受一個字符串，表示動畫被添加到由該字符串表示的隊列中

【5】specialEasing

　　specialEasing參數表示由animate()方法的第一個參數properties定義的一個或多個CSS屬性，及其相應的緩動函數組成的鍵值對map

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px','width':'100px'},{
      specialEasing:{
          left:'linear',
          width:'swing'
      }
  });
});
</script>

【6】step

　　step參數表示每個動畫元素的每個動畫屬性將調用的函數

　　step參數接受兩個參數(now和fx)，this表示當前正在執行動畫的DOM元素集合

　　其中，now表示每一步動畫屬性的數字值，而fx是jQuery.fx原型對象的一個引用，其中包含了多項屬性，比如elem表示前正在執行動畫的元素，start和end分別為動畫屬性的第一個和最后一個的值，prop為進行中的動畫屬性

　　[注意]step函數被每個動畫元素的每個動畫屬性調用

　　以下代碼中，通過設置第0個div元素的step參數，使其余div元素也進行相同的運動

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按鈕</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<div style="position:relative;height: 100px;width: 300px;background-color: lightyellow"></div>
<div style="position:relative;height: 100px;width: 300px;background-color: lightgreen"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px'},
      {
          step:function(now,fx){
              $('div').css('left',now)
          }
      });
});
</script>