用 dequeue继续动画

animate-queue和step-animate,animate-queue

Step-animate:

  分为3部分:{配置},{step:function(){…},duration:1000}

<div id="warpper">
                $("#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();

 

Step-animate: 分为3部分:{配置},{step:function(){…},duration:1000} div
id=”warpper”> $(“#warpper”).animate( { // 即使opacity只…

相关文章