JQuery set CSS Transform, Translate Properties in Class

Question

I cannot seem to set the CSS properties of transform using Jquery.

Here is my Code: https://jsfiddle.net/op7Lsvdp/

These are the two methods I have unsuccessfully tried.

$('.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)');

Thank You,

Answer 1

I think important thing about css method is that it is not changing your class property, but it is changing style property of object that you are calling it on.

This will do:

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

Answer 2

You're adding styles to .slideToCart elements, but there are none! See the console log:

https://jsfiddle.net/op7Lsvdp/2/

You're adding those classes after click on .buttonHolder, so maybe that's the time you want to add the .css