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 — Huangism
– Huangism, Commented May 4, 2021 at 17:02

s.kuznetsov · Accepted Answer · 2021-05-04 20:57:31Z

2

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 4, 2021 at 20:57

answered May 4, 2021 at 17:22

s.kuznetsov

15.3k3 gold badges12 silver badges31 bronze badges

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

9 Comments

JibriI Over a year ago

The variables change depends of element, how can i put that? With that it still doesn't work

s.kuznetsov Over a year ago

@JibriI, Then make a reproducible example, pls. Or add css, html, which can reproduce the problem.

s.kuznetsov Over a year ago

@JibriI, This won't work - var este = $(".a").not(":hidden"); let topp = este.css("--top");.... Also, add css and html.

JibriI Over a year ago

I have put the complete file now

JibriI Over a year ago

It had a bad URL so I have changed it another time

|

Collectives™ on Stack Overflow

Use a css variable in jQuery .animate

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related