-webkit-变换：增量与复位+ =操作不工作

-2

我试图通过设置-webkit-transform财产逐步重新定位的元素+=200px-webkit-变换：增量与复位+ =操作不工作

但它不工作。我错过了一些东西，但不知道是什么。

http://jsfiddle.net/yVSDC/

点击DIV应该将它进一步下降200像素每次。

来源

2013-04-10 tim

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。

来源

2013-04-10 00:09:47 alex

这是很多代码。有点像使用jQuery $ .cssHook – tim 2013-04-10 00:29:25

好吧，它适用于诸如marginLeft之类的东西，那么它为什么不能用于翻译？ – tim 2013-04-10 00:30:04

@tim因为'margin-left'的值是，例如'42px'。 'transform'的值是'translate（42px）'。为了解析这个，它需要更加聪明。你可以将它设置为jQuery中的钩子。 – alex 2013-04-10 00:33:18

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

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

示例代码：

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

来源

2013-04-10 00:13:54

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

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

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

来源

2013-04-10 00:52:18

-webkit-变换：增量与复位+ =操作不工作

回答

相关问题