jQuery動畫效果（借鑒他人的）

標籤：

1. （1）jquery中常見的幾種動畫效果

2. （2）動畫隊列執行的順序

   對於一組元素上的動畫效果，有如下兩種情況：

   a) 當在一個animate()方法中應用多個屬性時，動畫是同時發生的。

   b) 當以鏈式的寫法應用動畫方法時，動畫是按照順序發生的。 

   對 於多組元素上的動畫效果，有如下情況： a) 預設情況下，動畫都是同時發生的。 b) 當以回調的形式應用動畫方式時，動畫是按照回調順序發生的。 另外，在動畫方法中，要注意其他非動畫的方法會插隊，例如css()方法，要使這些非動畫的 方法也按照順序來執行，需要把這些方法寫在動畫方法的回呼函數中。 舉一個animate的例子：

   $("#id").animate({left:"400px",top:"300px"},3000,function(){ $(this).css("border","1px solid blue"); });

3. 3

   （3）若想要動畫停止，需要在animate()方法前插入stop()方法。

   例如:$("#id").stop().animate()注意stop中的兩個參數。

4. 4

   （4）判斷某元素是否在動畫狀態的方法如下：

   $(element).is(":animated");

5. 5

   （5） 在jquery中常用的動畫的方法就是hide()與show() $(element).hide()這段代碼可以與這相等 element.css("display","none") 在hide(time)與show(time)中填入事件，可以慢慢消失跟顯現。可以修改 元素的多個樣式，高度，寬度，不透明度。 另一組方法fadeIn()與fadeOut()這個與hide跟show不同的是，當使用hide或者 show的時候會改變網頁的高度，而fadeIn與fadeOut則不會。

   $("button").click(function(){  var div=$("div");  div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");  div.animate({width:‘300px‘,opacity:‘0.8‘},"slow");  div.animate({height:‘100px‘,opacity:‘0.4‘},"slow");  div.animate({width:‘100px‘,opacity:‘0.8‘},"slow");});
   
   
   
   

   $("button").click(function(){  var div=$("div");  div.animate({left:‘100px‘},"slow");  div.animate({fontSize:‘3em‘},"slow");});

jQuery動畫效果（借鑒他人的）