animate-queue和step-animate

Step-animate:

　　分爲3部分：{配置},{step:function(){...},duration:1000}

<div id="warpper" style="width: 50px;height: 100px;position: absolute;top: 10%;left: 45%;background: green;">
        </div>
        <script type="text/javascript">
            $(function(){
                $("#warpper").animate(
                    {
                        // 即便opacity只是配置，但opacity依舊有動畫效果，會從0增加
                        opacity: "0.5",
                        // 自定義配置：數字配置，會從0增加
                        rotate: "125",
                        // 自定義配置：從0變成Na
                        // 最後一個配置後面 不能有 ;
                        background: "red"
                        // step有2個參數 當前值:now 和 fx
                    },{step:function(now,fx){
                            $(this).css("transform","rotate("+now+"deg)");
                            // 利用 fx.prop 獲取配置的 rotate 進行判斷
                            // now有15個小數位，因此最好解析成 Int 類型
                            if(fx.prop == "rotate" && parseInt(now) < 47 && parseInt(now) > 43){
                                // animate 不能控制顏色！ 因此要麼用step 要麼用 queue。
                                $(this).css("background","red");    
                                // fx.elem.id ：fx能獲取 元素(elem)的ID屬性
                                console.log(fx.elem.id);
                                // 獲取配置的初試結束值
                                console.log(fx.start + " - " + fx.end);
                            }
                            // 設置動畫持續時間
                            // 持續時間最後面不能有 ;
                        },duration:1000
                    }
                );
            })
        </script>

 

經過 queue刪除動畫 隊列， 用 dequeue繼續動畫

            $("#warpper").click(function() {
                $("div").show("slow").animate({
                    left: '+=200'
                }, 1000).queue(function() {
                    $(this).addClass("newcolor");
                    $(this).dequeue();
                }).animate({
                    left: '-=200'
                }, 1500).queue(function() {
                    $(this).removeClass("newcolor");
                    $(this).dequeue();
                }).slideUp();
            });
            $("#stop").click(function() {
                $("div").queue("fx", []); /* 若是有queue那麼stop就要加這句*/
                $("div").stop();
            });

            清空還沒有執行的全部隊列
            $("div").clearQueue();