svg animate rectangle using jquery animate

Question

Please refer below column chart image.

how can i make the animation in svg rectangle. for positive value it will growing upwards and for negative value growing downwards.

1. I want to do this using jquery animate. i have implemented something increasing the height of rect. its fine for negative value but for positive value need to start for origin y axis value 0 and goes upwards. but it animating reverse order. i don't know what's going wrong. please refer my code snippet.

========================================================================

$(element).animate(
            {
                y: parseFloat($(element).attr("y")),
                height: parseFloat($(element).attr("height"))
            },
            {
                duration: 2000,

                step: function(now, fx) {
                    if (fx.prop == "y") {
                        $(element).attr("y", -now);
                    } else
                        $(element).attr("height", now);

                }
            });






<g id="container_svg_SeriesGroup_0" transform="translate(82,463)"><defs><linearGradient id="container_svg_series_0Gradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0" stop-color="gray" stop-opacity="1"/><stop offset="0.5" stop-color="blue" stop-opacity="1"/></linearGradient></defs><rect id="container_svg_Point0" x="104.7" y="-270.72222222222223" width="44.41818181818182" height="24.61111111111111" fill="url(#container_svg_series_0Gradient)" stroke-width="1" stroke="Gray" style="display: inline-block; height: 24.6111px;" transform="scale(1,0.4)"/><rect id="container_svg_Point1" x="168.15454545454546" y="-246.1111111111111" width="44.418181818181836" height="73.83333333333333" fill="url(#container_svg_series_0Gradient)" stroke-width="1" stroke="Gray" style="display: inline-block; height: 73.8333px;"/><rect id="container_svg_Point2" x="231.6090909090909" y="-283.02777777777777" width="44.41818181818181" height="36.916666666666664" fill="url(#container_svg_series_0Gradient)" stroke-width="1" stroke="Gray" style="display: inline-block; height: 36.9167px;"/><rect id="container_svg_Point3" x="295.0636363636364" y="-406.08333333333337" width="44.41818181818172" height="159.97222222222223" fill="url(#container_svg_series_0Gradient)" stroke-width="1" stroke="Gray" style="display: inline-block; height: 159.972px;"/><rect id="container_svg_Point4" x="358.51818181818186" y="-246.11111111111111" width="44.41818181818178" height="221.5" fill="url(#container_svg_series_0Gradient)" stroke-width="1" stroke="Gray" style="display: inline-block; height: 221.5px;"/></g>

---

Answer 1

When the value is positive you need to also change the y position of the rectangle. Something like:

step: function(now, fx) {
    if (!isNaN(now)) {
        $(element).attr("y", -now);
        $(element).attr("height", now);
    }
}

UPDATE:

I think this will work for you:

        var elements = $("#container_svg_SeriesGroup_0 rect");

        for (var e=0; e<elements.length; e++) {
            var $element = $(elements[e]);
            var height = parseFloat($element.attr("height"));
            var y = parseFloat($element.attr("y"));

            if (y < -247) {
                $element.animate( { height: height },
                {
                    duration: 2000,
                    step: function(now, fx) {
                        if(!isNaN(now)) {
                            $(this).attr("y", -247-now);
                            $(this).attr("height", now);
                        }
                    }
                });
            } else {
                $element.animate( { height: height },
                {
                    duration: 2000,
                    step: function(now, fx) {
                        if(!isNaN(now)) {
                            $(this).attr("height", now);
                        }
                    }
                });
            }
        }