Question

我有一个关于停止多个动画的问题，我在下面有一些伪代码来显示我的情况：

CSS

#aDiv
{
    position: absolute;
    background-image: url("gfx/nyancat.png");
    width: 46px;
    height: 50px;
    background-size: 55%;
    background-position: center center;
    background-repeat: no-repeat;
}

JQUERY

    function doAnimate(aDiv)
    {
    $(aDiv).animate({   //do stuff for first animation
                            height: (H*2)+"px",
                            width:  (W*2)+"px",
                            left: "-="+(W*0.5)+"px",
                            top: "-="+(W*0.5)+"px",
                            opacity: 1

                }, 500 , "linear", function()
{ $(aDiv).animate( //do stuff for second animation
                {
                        height: H+"px",
                        width:  W+"px",
                        left: "+="+(W*0.5)+"px",
                        top: "+="+(H*0.5)+"px",
                        opacity: 0.01

                }, 500, function()
                        {   //call itself
                            doAnimate( aDiv );
                        }
                    );
                }
        );
}

//somewhere else in the code
doAnimate(aDiv);

当我在stop()上调用aDiv ( $(aDiv).stop() )函数时，这是否会停止两个动画？我问的原因是因为我有一个在窗口加载时调用的动画div，但在调用stop然后重新启动动画时 - 动画不会像之前那样运行，所以我必须刷新页面。感谢

编辑：fiddle added

Answer 1

只需使用.stop（）即可满足我的要求。我使用的是JQuery 1.7，因此.finish（）功能对我来说是不可用的。对于我的问题，将背景大小的css值从auto更改为原始值（在我的情况下为55％）似乎已修复它。

JQuery animate（） - 停止所有动画

1 个答案: