Erik McFarland Erik McFarland - 2 years ago 217
HTML Question

JQuery set CSS Transform, Translate Properties in Class

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.

'-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 Source

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() {
        var button = $(this).find("button");

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

        var buttonHolder = $(this);

        setTimeout(function() {
            buttonHolder.css({'transform' : 'translate(' + left +', ' + top + ')'});
        }, 1000);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download