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

Here is my Code: /

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,

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,

• javascript
• jquery
• html
• css
• css-animations

• look at this method of sorting vendors prefixes (STEP3) stackoverflow.com/a/10237742/6213434 – user6213434 Commented May 6, 2016 at 22:38

2 Answers 2

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

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