JS: css property and value in one variable

Question

var trns1 = '"transition": "all 1s"';

Why doesn't that work?

$('#box').css({"transform": "translate(xy)", trns1 });

Shouldn't that be exactly the same like:

$('#box').css({"transform": "translate(xy)", "transition": "all 1s" });

because this add a propertie called trns1 with the value transition ... — Hacketo
– Hacketo, Commented Sep 11, 2015 at 16:07

Djave · Accepted Answer · 2015-09-11 16:27:55Z

2

Nope. Your JavaScript object isn't correct – you can't add a string in and expect it to work as a key value pair.

This will work:

var trns1 = { "transition": "all 1s"};
$('#box').css(trns1);

If you needed to add more options, you could do so easily:

var trns1 = { "transition": "all 1s"};
trans1.color = 'red';
trans1.height = '20px';
$('#box').css(trns1);

At the end of this trans1 would be

{
    'color' : 'red',
    'height' : '20px',
    'transition': 'all 1s'
}

Edit

Based on your comment you can easily chain events in jQuery.

var trns1 = {"transition": "all 0.3s ease"};
var trns2 = {"transform": "translateY(4vw)"};

And then use them like this:

$('#box').css(trns1).css(trns2);

edited Sep 11, 2015 at 16:27

answered Sep 11, 2015 at 16:06

Djave

9,4298 gold badges79 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Djave Over a year ago

JSON is an object surely... that's what the O actually stands for?

sebalinwy Over a year ago

great would be if i could do var trns1 = {"transition": "all 0.3s ease"}; var trns2 = {"transform": "translateY(4vw)"}; and then use them like this: .css(trns1, trns2). i want to use them modular

Collectives™ on Stack Overflow

JS: css property and value in one variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related