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,

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

gevorg · Accepted Answer · 2016-05-06 22:34:02Z

11

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

edited May 6, 2016 at 22:34

answered May 6, 2016 at 22:11

gevorg

5,1155 gold badges40 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

BlunderCode Over a year ago

Thank you! I still cant seem to get it work even with preset numbers instead of my variables any idea why that might be?

gevorg Over a year ago

Did you try buttonHolder solution?

yezzz Over a year ago

since v1.8 jquery takes care of prefixes, so you only need to use the regular transform. See about halfway api.jquery.com/css

BlunderCode Over a year ago

I see so I was thinking I was actually manipulating the class when in reality I was just changing the style. A key concept I cant believe I didn't understand. Up-voted and checked.

yezzz Over a year ago

well, I think my answer gave away what was wrong, so I had expected my answer to be accepted... and not Gevorg use my suggestion in his code. So I got a little pissed. Those generally last about 10 seconds... so no worries. Thanks for your reply :)

|

yezzz · Accepted Answer · 2016-05-06 22:34:01Z

3

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

answered May 6, 2016 at 22:34

yezzz

3,0381 gold badge12 silver badges20 bronze badges

Collectives™ on Stack Overflow

JQuery set CSS Transform, Translate Properties in Class

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related