jQueryの.css（）について

Question

jQueryの.css()について質問です。
以下のコード実装したいのですがうまくいきません。

$('sample').css('transform','translateX(100*4+"%")');

やりたいこととしましては、計算で出した値をtranslateX()の()の中に入れたいと考えています。
普通の計算値ですと単位がつかないので、単位をつけるために+"%"のようにしたのですがうまく機能しませんでした。
計算値で出した値はtranslateX()には使えないのでしょうか。

Answer 1

文字列として組み立てて渡せばよいです。

// $('sample').css('transform','translateX(100*4+"%")');
//                                              ↓
   $('sample').css('transform','translateX(' + ( 100 * 4 ) + '%)' );

Comments

[knight1220]

すばやい回答ありがとうございます。
回答いただいたコードで試してみたのですが希望の動作にはなりませんでした。（translateされませんでした）

[kei344]

https://jsfiddle.net/bufazxqp/

[knight1220]

ありがとうございます。
コピペしたところうまくいったので確認してみるとミスタイプをしておりました。
確認不足でした。
回答いただいたコードについてなのですが追加で質問させてください。
+'文字列'で文字を結合できると認識しているのですが、その認識ですと回答いただいたコードの'+(100*4)+'の部分が理解できませんでした。もし迷惑でなければご教授いただければ幸いです。

[kei344]

「計算結果と文字列を連結しています」でよいのでしょうか。
理解できない時は、できる限り「どう理解できないか」を伝えるようにしてください。どこで詰まっているか、どのように捉えているかが回答者にはわかりません。

[knight1220]

質問の仕方がへたで申し訳ありません。
'文字列'+'文字列'などのように文字列としたいものを''で囲むものと認識していたので回答いただいたコードの'+(100*4)+'ですと計算結果が得られず+(100*4)+　という文字列になるのでは？と思い理解ができていません。
説明が下手ですみませんが、よろしくおねがいします。

[kei344]

''は1組で文字列をあらわします。

'文字列' ← ここで一組
+
( 100 * 4 ) ← 数字（「+」で文字列につなげることが可能）
+
'文字列' ← ここで一組

[knight1220]

すみませんうまく理解できません。（私の頭が悪くて）
認識が間違っているかもしれないのですが、'translateX(' + ( 100 * 4 ) + '%)' );の2つ目の+は％と結合するための+であっていますか？また1つ目の+は何と結合しているのでしょうか？

[kei344]

'%)' という文字列と連結するため。

var aaa = 'translateX(';
var bbb = aaa + ( 100 * 4 );
// bbb には「translateX(400」が文字列として入っている
var ccc = bbb + '%)';
// ccc には「translateX(400%)」が文字列として入っている

[knight1220]

なるほど！そうゆう風になっているのですね！
jQueryの構文として.css('','')と書くと覚えていたので理解できていませんでした。
何回もしつこく質問したにも関わらず最後まで見捨てずに回答いただきありがとうございました。
感謝してもしきれないです、本当にありがとうございました。