-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.

Answer 2

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

And instead -webkit-transform:translateY(100px); in CSS you can set margin-top: 100px;

http://jsfiddle.net/yVSDC/28/

Answer 3

You have to get the Current webkit-transform value and increment it. Alternative Solution is ustin the top CSS Property

You can try this (it's free): http://ricostacruz.com/jquery.transit/

Sample Code:

$('.box').transition({ x: '200px' });
$('.box').transition({ y: '200px' });
$('.box').transition({ x: '200px', y: '200px' });