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) http://stackoverflow.com/a/10237742/6213434 — , May 06 '16 at 22:38

gevorg · Accepted Answer · 2016-05-06T22:34:02.740

10

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 06 '16 at 22:34

answered May 06 '16 at 22:11

gevorg

4,835
4
35
52

Thank you! I still cant seem to get it work even with preset numbers instead of my variables any idea why that might be? – BlunderCode May 06 '16 at 22:18
Did you try buttonHolder solution? – gevorg May 06 '16 at 22:19
1

since v1.8 jquery takes care of prefixes, so you only need to use the regular transform. See about halfway http://api.jquery.com/css/ – yezzz May 06 '16 at 22:20
Yes, we can skip top lines if you are using > v1.8 jquery – gevorg May 06 '16 at 22:23
Thanks for all the help I still cant seem to get it to work I'll fiddle with it some more and see if I can get it – BlunderCode May 06 '16 at 22:30
1

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. – BlunderCode May 06 '16 at 22:46
well thanks so much @ErikMcFarland for giving credit or at least reply to my answer which reveiled the actual problem... which was not targeting your elements correctly – yezzz May 06 '16 at 23:17
@yezzz I don't have enough credit to up vote yet sadly I did up-vote yours it just wont take effect until I have enough credit. – BlunderCode May 09 '16 at 19:12
1

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 May 09 '16 at 21:28

score 3 · Answer 2 · answered May 06 '16 at 22:34

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 06 '16 at 22:34

yezzz

2,990
1
10
19

JQuery set CSS Transform, Translate Properties in Class

2 Answers2