Use a css variable in jQuery .animate

Question

For some reason, in the JQuery the .animate doesn't work when using a variable into it, so the size and the position doesn't change into the second animate. The rest of the values like "60px" work, but that doesn't. I think it can be because it is not a number, but I don't know how to fix it. Ignore the //, they are only failed tests.

var ptop = 0;
var pleft = 0;
var este
$(document).ready(function() {
  $('.a').click(function() {
    este = $(this);
    ptop = ($(this).css("top"))+"px";
    pleft = ($(this).css("left"))+"px";
    $(".a").not($(this)).fadeOut("500");
    jQuery.when(($(".a").not($(this))).fadeOut("500")).then(function(){
      este.show().stop(true).animate({
        height: "700px",
        width: "700px",
        top: "50px",
        left: "50px",
        "pointer-events": "none",
      }, 500);
      este.css({"pointer-events":"none",});
      $("#"+este.attr("title")).fadeIn("500");
      /*jQuery.when($("#"+este.attr("title")).fadeIn("500")).then(function(){
        $(this).stop()
      });*/
    });
    $("#cerrar").hide().delay("500").fadeIn("500");
    $(".b").hide().delay(500).fadeIn("500");
  });
  $("#cerrar").click(function() {
    var este = $(".a").not(":hidden");
    let topp = este.css("--top");
    let sizze = este.css("--size");
    let lefft = este.css("--left");
    //$(".a").not(":hidden").fadeOut("500");
    $(".b").fadeOut("500");
    $("#"+$(".a").not(":hidden").attr("title")).fadeOut("500");
    //$(".a").css({"height": "var(--size)", "width": "var(--size)", "position":"absolute", "top":"var(--top)","left":"var(--left)","pointer-events":"all",}).fadeIn("500");
    $(".a").stop(true).animate({
      height: sizze,
      width: sizze,
      top: topp,
      left: lefft,
      "pointer-events":"all",
    },
    500
  );
    $(this).fadeOut("200");
  });
});

body {
  height: 100%;
  background: black;
}

.b {
  height: 700px;
  position: absolute;
  left:800px;
  top:50px;
  width: 700px;
  background-color: gray;
  display: none;
  border-radius: 10% 2% 10% 10%;
}
.p,
.s {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
}
.sol {
  --size: 100px;
  --top: 400px;
  --left: 400px;
  top: var(--top);
  left: var(--left);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg/220px-The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg);
  background-size: cover;
}
.mercurio {
  --size: 20px;
  --top: 200px;
  --left: 200px;
  top: var(--top);
  left: var(--left);
  background-image: url(http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2016/04/mercury_globe/15922572-1-eng-GB/Mercury_Globe_pillars.jpg);
  background-size: cover;
}
.venus {
  --size: 40px;
  --top: 100px;
  --left: 100px;
  top: var(--top);
  left: var(--left);
  background-image: url(https://static01.nyt.com/images/2020/09/14/science/15venus-es-00/14SCI-VENUS1-alt-superJumbo.jpg);
  background-size: cover;
  top: 100px;
}
.left {
  float: none;
}
.right {
  float: right;
}
agrandar {
  height: 700px;
  width: 700px;
  top: 50px;
  left: 50px;
  "pointer-events": none;
}
#cerrar {
  position: absolute;
  height: 20px;
  width: 20px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/PlayStation_button_X.svg/1024px-PlayStation_button_X.svg.png");
  border-radius: 0%;
  top: 55px;
  left: 1475px;
  background-size: cover;
  vertical-align: center;
  display: none;
  -webkit-user-select: none;

}
#Sol {
  margin: 0 0 0 0;
  position: absolute;
  height: 420px;
  width:650px;
  color: white;
  top:75px;
  left:825px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sistema Solar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="a s sol 1" title="Sol" >  </div>
  <div class="a p mercurio 2" title="Mercurio" >  </div>
  <div class="a p venus 3" title="Venus"> </div>
  <div class="b"> </div>
  <div class="c" id="cerrar">  </div>
  <div class="1" id="Sol">
    <p style="font-size: 64px ;text-align:center; margin: 0 0 0 0;"> <b>El Sol</b> </p>
    <p><span class="left"> Clasificación: </span> <span class="right"> Estrella "enana amarilla" </span></p>
    <p><span class="left"> Ubicación: </span> <span class="right"> Centro del Sistema Solar </span></p>
  </div>

</body>

</html>

Does this answer your question? [Accessing a CSS custom property (aka CSS variable) through JavaScript](https://stackoverflow.com/questions/36088655/accessing-a-css-custom-property-aka-css-variable-through-javascript) — Huangism, May 04 '21 at 17:02

s.kuznetsov · Accepted Answer · 2021-05-04T20:57:31.087

3

In your case, you can do without CSS variables. Specify individual parameters (height, width, left, top) for each animated element.

You can use the general class of all animated elements, by clicking on which you get the desired parameters (height, width, left, top) of the current element through the css() method.

For example:

$(".a").on("click", function () {
    let height_size = $(this).css("height");
    let width_size = $(this).css("width");
    let left_size = $(this).css("left");
    let top_size = $(this).css("top");
    ...

Next, pass these values to the animate() method.

$(".a").animate(
    {
        height: height_size,
        width: width_size,
        top: top_size,
        left: left_size,
        pointer-events: "all",
    },500);

edited May 04 '21 at 20:57

answered May 04 '21 at 17:22

s.kuznetsov

14,870
3
10
25

The variables change depends of element, how can i put that? With that it still doesn't work – JibriI May 04 '21 at 17:51
@JibriI, Then make a reproducible example, pls. Or add css, html, which can reproduce the problem. – s.kuznetsov May 04 '21 at 17:53
@JibriI, This won't work - `var este = $(".a").not(":hidden"); let topp = este.css("--top");...`. Also, add css and html. – s.kuznetsov May 04 '21 at 17:59
I have put the complete file now – JibriI May 04 '21 at 18:09
It had a bad URL so I have changed it another time – JibriI May 04 '21 at 18:20
@JibriI, Why did you choose css variables for dynamic values for animate()? – s.kuznetsov May 04 '21 at 18:57
Should I use directly JQuery variables? – JibriI May 04 '21 at 19:35
I'm new at this and I don't know so much. In that case, how can I make the value of the variable be different in each element? – JibriI May 04 '21 at 19:35
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231953/discussion-between-s-kuznetsov-and-jibrii). – s.kuznetsov May 04 '21 at 19:36

Use a css variable in jQuery .animate

1 Answers1