web-dev-qa-db-ja.com

jQueryはCSS変換を設定し、クラスのプロパティを変換します

Jqueryを使用して変換のCSSプロパティを設定できないようです。

これが私のコードです： https://jsfiddle.net/op7Lsvdp/

これらは、私がうまくいかなかった2つの方法です。

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

ありがとうございました、

javascriptjqueryhtmlcsscss-animations
5
BlunderCode

cssメソッドについて重要なことは、それがあなたのclassプロパティを変更していないことですが、あなたが呼び出しているオブジェクトの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);
    });
});
5
gevorg

.slideToCart要素にスタイルを追加していますが、何もありません！コンソールログを参照してください：

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

.buttonHolderをクリックした後でこれらのクラスを追加しているので、.cssを追加したいときかもしれません

3
yezzz