jQuery中Animate的示例

這篇文章給大家分享的是有關(guān)jQuery中Animate的示例的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

Step

Type： Function( Number now, Tween tween )
每個動畫元素的每個動畫屬性將調(diào)用的函數(shù)。這個函數(shù)為修改Tween 對象提供了一個機(jī)會來改變設(shè)置中得屬性值。

這個是如此的模糊，讓我們看下實例吧！

var k=0;
 $( ".block:first" ).animate(
          {
            left: 100,top:200
          },
          {
            duration: 1000,
            step: function( now, fx ){
                k++;                
                if(k==1) console.log(fx);
            }
);

你能想象輸出結(jié)果嗎？

讓我們來看下jQuery源碼吧：

jQuery.fx = Tween.prototype.init;
...
function Tween( elem, options, prop, end, easing ) {
    return new Tween.prototype.init( elem, options, prop, end, easing );
}
jQuery.Tween = Tween;
Tween.prototype = {
    constructor: Tween,
    init: function( elem, options, prop, end, easing, unit ) {
        this.elem = elem;
        this.prop = prop;
        this.easing = easing || "swing";
        this.options = options;
        this.start = this.now = this.cur();
        this.end = end;
        this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
    },
...}

ok！你應(yīng)該有個大致的輪廓了，讓我詳細(xì)講解下參數(shù)的意義吧~~

知道這些，我們可以做很多事！

jQuery Animation實現(xiàn)css3動畫 ：

jQuery Animation的工作原理是通過將元素的css樣式從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)。CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動畫效果。只有數(shù)字值可創(chuàng)建動畫（比如 “margin:30px”）。字符串值無法創(chuàng)建動畫（比如 “background-color:red”）。

像CSS3好多效果因為不是數(shù)值的，所以是沒有辦法直接通過animate()方法實現(xiàn)的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法，這些方法的一個特點就是它們的值是字符和數(shù)字混合在一起的。因此我們是不可以直接用animate()方法來動態(tài)地修改它們的值來實現(xiàn)動畫的效果。

如果我們自己用Javascript實現(xiàn)CSS3動畫，那么我們只能自已通過setInterval()方法來實現(xiàn)，實現(xiàn)起來比較復(fù)雜。其實animate()方法就是基于setInterval()方法進(jìn)行工作的，但是可以用方便的設(shè)置動畫速度，還可以設(shè)置是勻速還是變速。animate()方法的第二種用法有個stp參數(shù)規(guī)定動畫的每一步要執(zhí)行的函數(shù)。我們可以用使用一個不影響元素效果顯著的CSS值來觸發(fā)animate()方法，然后在step回調(diào)函數(shù)中修改我們想要修改的值，這樣就可以間接地實現(xiàn)動畫了。

CSS代碼：

#box {
  width:100px;
  height:100px;
  position:absolute;
  top:100px;
  left:100px;
  text-indent: 90px;
  background-color:red;
}

Html代碼：

 <p id="box"></p>

Javascript代碼：

var s=0;
$('#box').animate({  textIndent: 0 }, {   //這里的now參數(shù)即前面設(shè)置的數(shù)值，即textIndent: 0中的0，然后后面還有，則以后面的數(shù)值為準(zhǔn)。
   duration:2000,
   step: function(now,fx) {
        s++;
        fx.start=45;//你可以嘗試修改start,end值，來看rotate的變化
        fx.end=0;        
        if(s==1) console.log(fx.start+"----"+fx.end+"---"+fx.startTime);
      $(this).css('-webkit-transform','rotate('+now+'deg)');
   }
});

這里使用text-indent屬性來觸發(fā)動畫，是因為我們這里沒有文字，所以使用text-indent而不會影響到元素的樣式效果，這里也可以用font-size等。然后使用animate()方法產(chǎn)生的節(jié)奏來實現(xiàn)動畫。

感謝各位的閱讀！關(guān)于jQuery中Animate的示例就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！