javascript - -webkit-transform: incremental reposition with += operator not working

Question

I am trying to incrementally reposition an element by setting the -webkit-transform property to +=200px

But it doesn't work. I'm missing something, but don't know what.

• http://jsfiddle.net/yVSDC/

Clicking the div is supposed to move it further down by 200px everytime.

Answer 1

CSS doesn't work like that, and jQuery doesn't pull that data out so you can do it like that.

You'd need to read the value, add 200 and then reset it.

var getTranslatedY = function (element) {
    var transform = element.css("transform") || element.css("-webkit-transform") || element.css("-moz-transform");

    if (transform == "none") {
        return 0;
    }

    return parseInt((transform.match(/^matrix(.*?(-?[d.]+))$/) || [])[1]) || 0;
};

$('#m').on(
    'click',
    function () {
    var element = $(this);
         element
         .css('-webkit-transform',
              "translateY(" + (getTranslatedY(element) + 200) + "px)");
    });

jsFiddle.