JQuery在类中设置CSS Transform、Translate属性

JQuery set CSS Transform, Translate Properties in Class

本文关键字：Transform Translate 属性 CSS 设置 JQuery      更新时间：2023-09-26

我似乎无法使用Jquery设置转换的CSS属性。

这是我的代码：https://jsfiddle.net/op7Lsvdp/

这是我尝试过的两种方法，但都没有成功。

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

谢谢你，

我认为css方法的重要之处在于，它不会更改您的类属性，而是更改您调用它的对象的style特性。

这样做：

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

您正在向.slideToCart元素添加样式，但没有！请参阅控制台日志：

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

您在单击.buttonHolder之后添加这些类，所以也许现在是您想要添加.css 的时候了

相关文章：