jq如何實(shí)現(xiàn)多個元素同時實(shí)現(xiàn)多個動畫？

很多情況下，前面幾種動畫方法無法滿足用戶的各種需求，那么就需要對動畫有更多的控制，需要采取一些高級的自定義動畫來解決這些問題。

在jQuery中，可以使用animate()方法來自定義動畫。其語法格式如下：

animate(params, speed, callback); 參數(shù)說明如下：

(1).params:一個包含樣式屬性及值的映射，比如{property1:”value1″, property2:”value2″,…}

(2).speed:速度參數(shù)，可選。

(3).callback:在動畫完成時執(zhí)行的函數(shù)，可選。

1.自定義簡單動畫 前面幾個例子，從不同的方面使元素動了起來，animate()方法也可以使元素動起來，而且animate()方法更具有靈活性。通過animate()方法，能夠?qū)崿F(xiàn)更加精致新穎的動畫效果。

首先來看一個簡單的例子，有一個空白的HTML文檔，里面有一個id=”panel”的div元素，當(dāng)div元素被單擊后，能在頁面上橫向飄動，我們可以寫入下面的jQuery代碼：

$(function () { $('#panel').click(function () { $(this).animate({ left: '500px' }, 3000); }); }); 在本段代碼中，首先為id 為“panel”的元素創(chuàng)建一個單擊事件，然后對元素加入animate()方法，使元素在3秒（3000毫秒）內(nèi)，向右移動500像素。

為了使元素動起來，要更改元素的“l(fā)eft”樣式屬性。需要注意的是在使用animate()方法之前，為了能夠影響該元素的“top”、”left”、”bottom”、”right”樣式屬性，必須先把元素的poation樣式設(shè)置為“relative”或者“absolute”。

2.累加、累減動畫 在之前的代碼中，設(shè)置了{(lán)left:”500px”}作為動畫參數(shù)。如果在500px之前加上“+=”或者“-=”符號即表示在當(dāng)前位置累加或者累減。代碼如下：

$(function () { $('#panel').click(functio n () { $(this).animate({ left: '+=500px' }, 300); //在當(dāng)前位置累加500px }); }); 3.多重動畫 (1)同時執(zhí)行多個動畫 在上面的例子中，通過控制屬性left的值實(shí)現(xiàn)了動畫的效果，這是一個很簡單的動畫。如果需要同時執(zhí)行多個動畫，例如在元素向右動畫的同時，放大元素的高度。根據(jù)animate()方法的語法結(jié)構(gòu)，可以寫出如下的jQuery代碼：

$(function () { $('#panel').click(function () { $(this).animate({ left: '500px', height: '200px' }, 3000); }); }); 運(yùn)行代碼后，div元素在向右華東的同時，也會放大高度。

(2).按順序執(zhí)行多個動畫 如果想要按順序執(zhí)行動畫，只需要將代碼拆開，然后按照順序?qū)懛ň涂梢粤耍琷Query代碼如下：

$(this).animate({left:'500px'},3000); $(this).animate({height:'200px'},3000); 因?yàn)閍nimate()方法都是對同一個jQuery對象進(jìn)行操作，所以可以改為鏈?zhǔn)綄懛ǎa如下：

$(this).animate({ left: '500px' }, 3000);.animate({ height: '200px' }, 3000); 4.綜合動畫 接下來將完成更復(fù)雜的動畫。單擊div元素后讓它向右移動的同時增大它的高度，并將它的不透明度從50%變換到100%,然后在讓它從上到下移動，同時它的寬度變寬，當(dāng)完成這些效果后，讓它可以淡出的方式隱藏。

實(shí)現(xiàn)這些功能的jQuery代碼如下：

$(function () { $('#panel').css('opacity', '0.5'); $('#panel').click(function () { $(this).animate({ left: '400px', height: '200px', opacity: '1' }, 3000).animate({ top: '200px', width: '200px' }, 3000).fadeOut('slow'); }); }); 運(yùn)行代碼后，動畫效果一步步執(zhí)行完畢。通過這個例子可以看出，為同一元素應(yīng)用多重效果時，可以通過鏈?zhǔn)椒椒▽@些效果進(jìn)行排隊(duì)。