javascript - jquery animate函数开始时间以及如何设置初始值

Question

我正在为我们的折线图使用 jquery.animate 函数。

动画线条和圆形符号。请参考下面的代码。

    _doLineAnimation: function() {
            var clipRect = $(this.chartObj.gSeriesEle).find("#" + this.gSeriesGroupEle.id + "_ClipRect").children();
            $(clipRect).animate(
                { width: parseFloat($(this.chartObj.gSeriesEle).find("#" + this.gSeriesGroupEle.id + "_ClipRect").children().attr("width")) },
                {
                    duration: 2000,

                    step: function(now) {
                        $(clipRect).attr("width", now);
                    }
                });

// the below code for animating the symbol
            var elements = $(this.chartObj.gSymbolGroupEle).children().not("defs");
            for (var i = 0; i < elements.length; i++) {
                var element = elements[i];
                this.animateSymbol(element);
            }

        }


animateSymbol:function(element) {
         var box = element.getBBox();
           var centerX = box.x + (box.width / 2);
           var centerY = box.y + (box.height / 2);
           var scaleVal;
               $(element).animate(
                   {
                       scale: 1,

                   },
                   {
                       duration: 2000,

                       step: function(now) {
                           scaleVal = now;
                           $(element).attr("transform", "translate(" + centerX + " " + centerY + ") scale(" + scaleVal + ") translate(" + (-centerX) + " " + (-centerY) + ")");


                       }
                   }
               );  
    },

我的问题是线和符号同时动画。每当线条到达该点时，我想执行符号动画（即放大符号）。

所以我需要为符号动画设置一些开始时间，现在它将从 0 开始并在 2000 毫秒后结束。但是我需要等待一些时间来让每个符号在线条到达每个点后进行动画处理。

我还需要在 animate() 函数中设置一个开始时间，它将从这个时间开始，并在 2000 毫秒后结束。

我还需要在动画函数中设置一些初始值。

例如：scale:1 表示它将从 0 开始，但我希望它从 0.5 到 1。如何在 animate() 函数中设置初始值？

我需要设置开始时间并将刻度值初始化为 0.5。

我期待类似的东西：

.animate ({
begintime: 1000

duartion:2000

initialvalue :scale :0.5
});

Answer 1

您可以jQuery.delay()用于延迟动画的开始：

$(element).delay(1000).animate({}, 2000, function () {});

如果延迟不起作用，则使用 为元素设置动画setTimeout：

setTimeout(function () {
    $(element).animate({}, 2000, function () {});
}, 1000);