How do i use a simple string variable with jquery?

Question

I have this code:

$(function(){

  $( "div.modal-content3" ).on( "swipeleft", swipeleftHandler );


  function swipeleftHandler( event ){
  if ($('.modal-content').css('display') == 'block' && $('.modal-content2').css('display') == 'block') {

  $("div.modal-content3").css({"zIndex":"3", "transform":"scale(0.8)", "marginTop":"-50px", "animationName":"animleft", "animationDuration":"0.7s"});
  $("div.modal-content2").css({"zIndex":"4", "transform":"scale(0.9)", "marginTop":"-25px", "animationName":"none", "animationDuration":"0"});
  $("div.modal-content").css({"zIndex":"5", "transform":"scale(1)", "marginTop":"0px"});
}

How can i put the css part of the code:

"zIndex":"3", "transform":"scale(0.8)", "marginTop":"-50px", "animationName":"animleft", "animationDuration":"0.7s"

and put it in a variable, to later insert to the jquery code?

i've tried something like this but with no success:

var test = '"zIndex":"3", "transform":"scale(0.8)", "marginTop":"-50px",
"animationName":"animleft", "animationDuration":"0.7s"';

$("div.modal-content3").css({ + test + });

Am i mixing javascript and jquery and is that the reason it doesn't work?

Answer 1

You are representing an object as a string. You should instead do

var test = {"zIndex":"3", "transform":"scale(0.8)", "marginTop":"-50px", "animationName":"animleft", "animationDuration":"0.7s"};

OR you could parse the JSON you have

var test = JSON.parse('"zIndex":"3", "transform":"scale(0.8)", "marginTop":"-50px", "animationName":"animleft", "animationDuration":"0.7s"');

As for your next line, you are confusing { and } for strings. If you use the variable definitions above, and remove the { + and + } then it should work.

Answer 2

The reason is that jQuery's .css() method does not accept a string if you want to set multiple properties, but instead requires an object containing key-value pairs that match the CSS rules you want to change.

var test = { "zIndex":"3", "transform":"scale(0.8)", "marginTop":"-50px", "animationName":"animleft", "animationDuration":"0.7s" };

$("div.modal-content3").css(test);

Even though this works, it feels like you're overcomplicating stuff here.

Why don't you simply create the following CSS class:

.my-class { 
  z-index: 3;
  transform: scale(0.8);
  margin-top: -50px;
  animation-name: animleft;
  animation-duration: 0.7s
}

which would simplify your jQuery to

$("div.modal-content3").addClass("my-class");