javascript - jquery animate step function with attribute value initialization - Stack Overflow

admin管理员组

文章数量:1405102

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

Share Improve this question Follow edited Jun 11, 2013 at 7:25 palaѕн 74k1717 gold badges122122 silver badges139139 bronze badges asked Jun 11, 2013 at 7:17 SivaRajiniSivaRajini 7,3752222 gold badges8484 silver badges129129 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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 + ")

本文标签： javascriptjquery animate step function with attribute value initializationStack Overflow