jQuery 動畫

show()和hide()方法

hide() $(「element」).hide(); //隱藏元素      element.css(「display」,none); //與前面代碼效果相同

show() $(「element」).show(); //顯示元素 element.css(「display」,inline); //顯示元素，或者使用block

能夠爲show()方法指定一個速度參數，例如，指定一個速度關鍵字「slow」   代碼以下：

$(「element」).show(「slow」); 其餘的速度關鍵字還有normal（400毫秒），fast（200毫秒），或者直接使用毫秒數字。

fadeIn()方法和fadeOut()方法 

 

 只改變元素不透明度

 fadeTo()方法能夠把元素的不透明度以漸進方式調整到指定值。

slideUp()方法和slideDown()方法

 只會改變元素的高度

  $(function () {
            //hide   從右下角到左上角的收縮，寬和高都減小  show相反
            //fadeIn  
            //slideDown    只減小寬
            $(".head").bind("mouseover", function () {
                $(this).next().slideDown(1200);
            }).bind("mouseout", function () {
                $(this).next().slideUp(1200);
            });
           
        });

本身定義動畫animate()

animate（params，speed，callback）；

1.params：一個包含樣式屬性及值的映射，好比{property1:」value1」,property2:」value2」}

2.speed:速度參數，可選。

3.callback：在動畫完成時執行的函數，可選

簡單動畫

  $("#panel").click(function(){ $(this).animate({left: "500px"}, 3000); })

多重動畫   上一個案例只控制了div塊從左網右移動，而多重動畫能夠在一個動畫中有多個變化效果。

$(function(){ $("#panel").click(function(){ $(this).animate({left: "500px",height:"200px"}, 3000);     });      });

分步執行：

$(function(){ $("#panel").click(function(){  $(this).animate({left: "500px"}, 3000) .animate({height: "200px"}, 3000);  })  })

<script>
        $(function () {
                $("div").animate({ "left": "500px", "top": "500px", "width": "150px", "height": "150px" }, 3000).animate({
                    "left": "0", "top": "0", "width": "100px", "height": "100px"}, 3000);
        });
    </script>

回調函數：

  $(function () {
            $("#small").animate({ "left": "920px" }, 3000).animate({ "top": "450px" }, 4000, function () {
                $("#small").css("background-color", "red");  //動畫執行完或執行此函數
　　　　    });
        });

中止動畫

不少時候須要中止匹配元素正在進行的動畫，例如上例的動畫，若是須要在某處中止動畫，須要使用stop()方法。

stop([clearQuery][,gotoEnd]);

參數clearQuery和gotoEnd都是可選的參數，爲Boolean值（true，false）。

clearQueue表明是否要清空未執行完的動畫隊列。  True:不執行後面的動畫列隊  False：執行後面的動畫列隊

gotoEnd表明是否直接將正在執行的動畫跳轉到結束位置。    True: 直接調到結束位置    False:不作了這個動畫，不動了

 

在製做動畫效果的時候，當觸發的動畫過多時，常常會出現前面的動畫還未執行完後面的動畫又被觸發，致使動畫效果存儲到隊列中，直到運行一個個運行結束。

快速劃過問題： 執行動畫以前 stop() ==stop(false,false)

 

  $(function () {
            //stop默認  stop(false,false)
            $("#panel").hover(function () {
                $(this).stop(true,false).animate({ height: "150", width: "300" }, 200);
            }, function () {
                $(this).stop(true, false).animate({ height: "22", width: "60" }, 300);
            });
        });

 

 

 

 

stop()方法只能中止一個動畫，它並不能中止連續動畫，這是咱們就必須結束stop()方法的第一個參數，清除動畫隊列，從新開始新的動畫。

 連續動畫問題：  執行動畫以前 stop() ==stop(true,false)

 

 $(function () {
            $("#panel").hover(function () {
                $(this).stop(true,false)
                    .animate({ height: "150" }, 200)
                    .animate({ width: "300" }, 300)
            }, function () {
                $(this).stop(true,false)
                    .animate({ height: "22" }, 200)
                    .animate({ width: "60" }, 300)
            });
        });

 

注：記住一個，關於上面兩個問題   在執行動畫以前   給stop(true,false)便可