Please refer below animation code.

$(element).delay(2000).animate({
    scale: 1,
}, {
    duration: 1000,
    step: function (now) {
        scaleVal = now;
        $(element).attr("transform", "translate(" + centerX + " " + centerY + ") scale(" + scaleVal + ") translate(" + (-centerX) + " " + (-centerY) + ")");
    }
});

scale is attribute of an element. scale value always starts from 0 and end up in 1. i want scale value starts from 0.5 and goes up to 1.

In step function scale always starts from 0.

Need : scale value maximum is 1 and starts from 0.5 instead of 0.

Thanks,

Siva

Please refer below animation code.

$(element).delay(2000).animate({
    scale: 1,
}, {
    duration: 1000,
    step: function (now) {
        scaleVal = now;
        $(element).attr("transform", "translate(" + centerX + " " + centerY + ") scale(" + scaleVal + ") translate(" + (-centerX) + " " + (-centerY) + ")");
    }
});

scale is attribute of an element. scale value always starts from 0 and end up in 1. i want scale value starts from 0.5 and goes up to 1.

In step function scale always starts from 0.

Need : scale value maximum is 1 and starts from 0.5 instead of 0.

Thanks,

Siva

• javascript
• jquery
• jquery-animate

• possible duplicate of jquery animate function initialize the value – elclanrs Commented Jun 11, 2013 at 7:18
• @eclanrs: there is no solution provided in that link.am using attribute not a css of an element. – SivaRajini Commented Jun 11, 2013 at 7:23

2 Answers 2

jQuery use Tween.propHooks to get/set properties in animation. The non-CSS property scale will be treated as a property binded to the DOM element that is being animated on. So you can set the initial value of the scale property before animation.

$(element).each(function () { this.scale = 0.5; }).delay(2000).animate({
    scale: 1,
}, {
    duration: 1000,
    step: function (now) {
        scaleVal = now;
        $(element).attr("transform", "translate(" + centerX + " " + centerY + ") scale(" + scaleVal + ") translate(" + (-centerX) + " " + (-centerY) + ")");
    }
});

Live Demo

You may also use second argument of the step function, which is a reference to the jQuery.fx object. Among other it has "start" property that specifies first value of the animated property (it also has 'end' for the last value and 'prop' to specify property being animated)

Also you should set css transform of the animated element to be 0.5 at the beginning, so that it won't be set from 0 to 0.5 abruptly when animation starts, and you should use .css method to do this, not .attr, as its not element's attribute, but css3 property.

$(element).css("transform","scale(0.5)").delay(2000).animate({
    scale: 1,
    }, {
        duration: 1000,
        step: function (now, fx) {
        scaleVal = now;
        fx.start = 0.5;  
        $(element).css("transform", "scale(" + scaleVal + ")");
    }
});

see jsfiddle

also, when you use "translate" method for css transformation, you should set ma between x and y values translate(" + centerX + ", " + centerY + ")