jQuery设置CSS转换,转换类中的属性

Blu*_*ode 5 html javascript css jquery css-animations

我似乎无法使用Jquery设置transform的CSS属性。

这是我的代码:https : //jsfiddle.net/op7Lsvdp/

这是我尝试失败的两种方法。

$('.slideToCart').css({
  '-webkit-transform' : 'translate(left, top)',
  '-moz-transform'    : 'translate(left, top)',
  '-ms-transform'     : 'translate(left, top)',
  '-o-transform'      : 'translate(left, top)',
  'transform'         : 'translate(left, top)'
});

$('.slideToCart').css('transform', 'translate(50px, 50px)');
$('.slideToCart').css('-webkit-transform', 'translate(50px, 50px)');
Run Code Online (Sandbox Code Playgroud)

谢谢,

gev*_*org 5

我认为关于CSS方法的重要一点是,它不会更改您的属性,而是正在更改您要调用它的对象的样式属性。

这样可以:

$( document ).ready(function() {
    $('.buttonHolder').click(function(){
        $(this).find("span").toggleClass('fadeText');
        var button = $(this).find("button");
        button.toggleClass('shrink');

        var position = $('.target').position();
        var left = position.left + 'px';
        var top = position.top + 'px';

        var buttonHolder = $(this);

        setTimeout(function() {
            buttonHolder.css({'transform' : 'translate(' + left +', ' + top + ')'});
        }, 1000);
    });
});
Run Code Online (Sandbox Code Playgroud)