首页 > Web开发 > 详细

JS的animate-queue和step-animate

时间:2017-01-24 11:57:38      阅读:251      评论:0      收藏:0      [点我收藏+]

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

 

JS的animate-queue和step-animate

原文:http://www.cnblogs.com/zhongmeizhi/p/6343252.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!