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();

 

转载于:https://www.cnblogs.com/zhongmeizhi/p/6343252.html