Question

我正在尝试通过将-webkit-transform属性设置为+=200px来逐步重新定位元素

但它不起作用。我错过了什么，但不知道是什么。

的 http://jsfiddle.net/yVSDC/

单击div应该每次向下移动200px。

Answer 1

CSS不能像那样工作，并且jQuery不会将数据拉出来，所以你可以这样做。

您需要阅读该值，添加200然后重置它。

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;
});

而在CSS中-webkit-transform:translateY(100px);，您可以设置margin-top: 100px;

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

Answer 3

您必须获取当前webkit-transform值并将其递增。替代解决方案是top CSS属性

你可以尝试这个（它是免费的）：http://ricostacruz.com/jquery.transit/

示例代码：

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

-webkit-transform：使用+ =运算符无法正常工作的增量重定位

3 个答案: