關於JQuery animate()方法

標籤：mat   htm   round   第一個   relative   多個   jquer   pac   fun   

html:

        <button>點擊我</button><p>如果你想在一個涉及動畫的函數之後來執行語句，請使用callback函數</p><div class="panel"></div><div class="content"></div>    

css部分：

注意：使用animate函數時，為了能夠影響元素的 top bottom left right 屬性值，需先將position屬性值設定為 relative 或者 absolute　

            .panel {width: 100px;height: 100px;border: 1px solid #0050d0;background: red;cursor: pointer;position: relative;}.content {width: 100px;height: 100px;margin-top: 20px;background: green;}        

 如果在500之前加上 += 或 -= 代表在當前位置遞增或者遞減　

        $(".panel").click(function() {$(this).animate({left: "+=500"},3000);//遞增         })  

同時執行多個動畫

$(this).animate({left: "500", top: "200"},3000);

按順序執行動畫 -- 動畫隊列

 $(this).animate({left: "500"},3000); $(this).animate({top: "200"},3000);

以上可改為 鏈式寫法

$(this).animate({left: "500px"},3000).animate({top: "200px"}, 3000);

 綜合動畫
 透明度可以用小數，用百分數無效

$(this).animate({left: "500px", height: "200px", opacity: "0.5"},3000).animate({top: "200px", width: "200px"},3000).fadeOut("slow");

 給hover 事件添加 stop() 方法 可解決移入移出動作過快 導致游標動作與動畫效果不一致的問題
注意： 移入移出都需要添加stop()

$(".panel").hover(function() { $(this).stop().animate({height: "150",width: "300"},3000) },function(){ $(this).stop().animate({height: "22",width: "60"},3000) })

當遇到的是組合動畫的時候

                    $(".panel").hover(function() {$(this).stop().animate({height: "150"},3000)//如果此時游標移出.animate({width: "300"},3000)//執行這個動畫 而不是下面移出的動畫},function(){$(this).stop().animate({height: "22"},3000).animate({width: "60"},3000)})            

把stop()第一個參數設定為true ，可以解決上面的問題，跳過width為300的樣式改變 執行滑鼠移出事件

                    $(".panel").hover(function() {$(this).stop(true).animate({height: "150"},3000)//如果此時游標移出.animate({width: "300"},3000)//執行下面移出的動畫},function(){$(this).stop(true).animate({height: "22"},3000).animate({width: "60"},3000)})

如果stop()第二個參數也設定為true的時候,可以直接到達結束時候的狀態

　　

　　

　　

　　

　　

　　

　　

　

關於JQuery animate()方法