Время начала функции анимации jquery и как установить начальное значение

Я использую функцию 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 мс.

Мне также нужно установить некоторое начальное значение в функции анимации.

пример: масштаб: 1 означает, что он будет начинаться с 0, но я хочу, чтобы он начинался с 0,5 до 1. Как я могу установить начальное значение в функции animate()?

Мне нужно установить время начала, а также инициализировать значение масштаба 0,5.

Я ожидаю что-то вроде:

.animate ({
begintime: 1000

duartion:2000

initialvalue :scale :0.5
});

javascript svg jquery jquery-animate jquery-svg
person SivaRajini    schedule 11.06.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать jQuery.delay() для задержки начала анимации:

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

Если задержка не работает, анимируйте элемент с помощью setTimeout:

setTimeout(function () {
    $(element).animate({}, 2000, function () {});
}, 1000);
person Konstantin Dinev    schedule 11.06.2013
comment
Я пробовал, функция задержки не работает. Результат тот же. - person SivaRajini; 11.06.2013
comment
@SivaRajini Обновлено вторым предложением. - person Konstantin Dinev; 11.06.2013
comment
Я тоже пробовал setTimeout. не работает. Тот же вывод. анимация происходит и по линии, и по символу одновременно. - person SivaRajini; 11.06.2013
comment
@SivaRajini Тогда проблема не в том, что вы не откладываете анимацию, а в том, что вы запускаете обе анимации одновременно. - person Konstantin Dinev; 11.06.2013