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

成都創(chuàng)新互聯(lián)公司2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目做網(wǎng)站、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元馬鞍山做網(wǎng)站,已為上家服務(wù),為馬鞍山各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

Step

Type： Function( Number now, Tween tween )
每個動畫元素的每個動畫屬性將調(diào)用的函數(shù)。這個函數(shù)為修改Tween 對象提供了一個機會來改變設(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ù)的意義吧~~

fx

屬性	類型	值
easing	字符串	動畫方式"linear",swing,easeIn,easeOut...等
elem	DOM元素	正在動畫的元素
end	數(shù)值	動畫結(jié)束值
now	數(shù)值	動畫當(dāng)前值
options	對象	參數(shù)
options.duration	數(shù)值	傳到動畫動的duration
options.queue	字符串	動畫隊列
pos	數(shù)值	在動畫過程中從0.0到1.0
prop	字符串	正在變化的css屬性
start	數(shù)值	CSS屬性開始變化的值
unit	字符串	CSS值的單位

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

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()方法進行工作的，但是可以用方便的設(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代碼：

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é)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文題目：jQuery中Animate的示例-創(chuàng)新互聯(lián)
文章地址：http://weahome.cn/article/cdeges.html