取得したCSSプロパティ値の保存について

Question

いつも参考にさせていただいています。
JavaScriptを勉強中です。

jQueryでCSSの値を保存する方法を探しているのですが、
なかなかヒントが見つからないため、質問させていただきます。

jQueryでオブジェクトをアニメーションさせようとしています。
このアニメーションは後で実装しなくなる可能性があるため、
CSSにて設定したプロパティ値をアニメーションの終点とし、
CSSから取得した値をJavaScriptに一度保存し、
その後にCSSの値を書き換える、ということを実現したいのですが
うまく動いてくれず、最初に設定した変数が0pxに変わってしまいます・・。

初期のCSSプロパティ値を保存する方法はございますでしょうか・・。
ご教示願えればと思います。よろしくお願いします。

var setObj = function(target, duration) {
  var objH = target.css('height');
  var objW = target.css('width');
  var objT = target.css('top');
  var objL = target.css('left');

  target.css({
    'width'  : '0px',
    'height' : '0px',
    'top'    : '0px',
    'left'   : '0px'
  });

  setTimeout(function() {
    target.stop().animate({
      'width'  : objW + 'px',
      'height' : objH + 'px',
      'top'    : objT + 'px',
      'left'   : objL + 'px',
      'opacity': 1
    }, 300, 'easeOutBack')
    .removeClass('move');
  }, duration);
}

setObj($('#obj-01.move'), 1000);

<p id="obj-01" class="move"></p>
<p id="obj-02" class="move"></p>
・・・
<p id="obj-06" class="move"></p>

Answer 1

'width' : objW + 'px',
の + 'px' を消してみてください。
var objW = target.css('width');
でobjW は '100px' となっていて objW + 'px' では '100pxpx'になっているようですよ

Comments

[Yoh]

ご回答ありがとうございます！
すいません、ケアレスミスでした・・