0

我正在使用 jQuery 的简单动画方法和使用 jQuery 动画方法的旋转功能来创建移动的div ("#box").

    function AnimateRotate(d, div, del){

        var elem = $(div);

        $({deg: 0}).delay(del).animate({deg: d}, {
            duration: 2000,
            step: function(now){
                elem.css({
                     transform: "rotate(" + now + "deg)"
                });
            }
        });
    }

...

        AnimateRotate(360, "#box", 0)


        $("#box").animate(

        {

            top : "400px",
            left : "400px",
            width : "250px",
            height : "120px"

        },2000, function() {.....

这完美地工作，除了这只会将我div的原始位置移动到新设置的位置。

我希望它做一个螺旋运动，所以我需要 div 移动一个位置，到另一个，到另一个，到另一个....

为此，我尝试了：

        AnimateRotate(360, "#box", 0)


        $("#box").animate(

        {

            top : "400px",
            left : "400px",
            width : "250px",
            height : "120px"

        },2000, function() {

            AnimateRotate(360, "#box", 0)


            $("#box").animate(

            {

                top : "200px",
                left : "200px",
                width : "250px",
                height : "100px"

            },2000, function() {.....

依此类推，直到我有大约或 6 个不同的位置。但是在每个动画之间会有一点停顿，这基本上会破坏整个动画。

我想知道是否有办法防止这种暂停？

如果没有，有没有更好的方法来制作这种类型的动画？即使这意味着完全失去 div 并使用其他类型的形状动画。

请让我知道解决此问题的最佳方法是什么。

非常感谢任何答案。

4

0 回答 0