How to animate the element in jquery

Question

I am trying to animate my element using jquery. The purpose of the code is to be a speedometer on my server The element I am trying to animate is called box3

NOTE : Code might not look the same for you as it looks for me. The code is running on FiveM Server

 if (data.akcija == "spidometar") { $(".box-tekstic").html(Math.round(data.speed)) if (data.speed > 0) { $("#SpeedIndicator").text(data.speed); let multiplier = data.maxspeed * 0.1; let SpeedoLimit = data.maxspeed + multiplier; Speedometer = (data.speed / SpeedoLimit); } }

 .box-float{ position: relative; right: 5vh; top: 34vh; }.box { --v:calc( ((18/5) * var(--p) - 90)*1deg); position: absolute; width:180px; height:180px; transform: rotate(160deg); border-radius:50%; padding:25px; background: linear-gradient(var(--v), transparent 50%,#4c4c4e 0) 0/min(100%,(var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #4c4c4e 0); -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:destination-out; mask-composite:exclude; }.box2 { --v:calc( ((18/5) * var(--p) - 90)*1deg); position: absolute; width:170px; left: 0.4vh; top: 5; height:170px; transform: rotate(160deg); border-radius:50%; padding:12px; background: linear-gradient(var(--v), transparent 50%,#8a8989 0) 0/min(100%,(var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #8a8989 0); -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:destination-out; mask-composite:exclude; }.box3 { --v:calc( ((18/5) * var(--p) - 90)*1deg); position: absolute; left: 0.4vh; top: 5; width:170px; height:170px; transform: rotate(160deg); border-radius:50%; padding:12px; background: linear-gradient(var(--v), transparent 50%,#b7ff00 0) 0/min(100%,(var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #b7ff00 0); -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%,transparent 0) 0/min(100%,(50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:destination-out; mask-composite:exclude; }

 <div class="box-float"> <div class="box" style="--p:68;"></div> <div class="box2" style="--p:68;"></div> <div class="box3" style="--p:50;"></div> </div>

Answer 1

I know this is not directly answering your question. But I would highly recommend not using JQuery. It served a long and useful life, but there are a lot new, efficient and less bloated libraries available today.

For doing Animation with JS, I recommend checking out https://animejs.com/

Here is an example codepen https://codepen.io/borntofrappe/pen/qGozVM

const clockFace = document.querySelector('svg g.clock--face');
// add the twelve numbers by rotating, translating and then rotating back text elements
// ! add a zero to the numbers smaller than 10 through the utility function
for (let i = 0; i < 12; i += 1) {
  clockFace.innerHTML += `
    <text
        transform="rotate(${-90 + 30 * (i + 1)}) translate(34 0) rotate(${90 - 30 * (i + 1)})" >
        ${zeroPadded(i + 1)}
    </text>
  `;
}

If you have to use jQuery then just use something like.

codepen.io/rpandrews/pen/zaxNyK

$('speedElement').css("transform", "rotate(" + speed_Angle_Variable + ")");

or

// not sure what element is what, since not displaying properly with run code
$('.box-float .box').css("--p", speed_Angle_Variable);

 (function($) { function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } $(document).ready(function() { let data = { akcija: "spidometar", speed: 50, maxspeed: 68 } if (data.akcija == "spidometar") { $(".box-tekstic").html(Math.round(data.speed)) if (data.speed > 0) { $("#SpeedIndicator").text(data.speed); let multiplier = data.maxspeed * 0.1; let SpeedoLimit = data.maxspeed + multiplier; Speedometer = (data.speed / SpeedoLimit); } } function changeSpeed(target, data) { setTimeout(function() { if (target < data.speed) data.speed--; if (target > data.speed) data.speed++; $('.box-float.box3').css("--p", data.speed + ''); if (target.= data,speed) { changeSpeed(target; data ), } }, 100) } changeSpeed(25; data); }); })(jQuery);

 .box-float { position: relative; left: 5vh; top: 34vh; }.box { --v: calc( ((18/5) * var(--p) - 90)*1deg); position: absolute; width: 180px; height: 180px; transform: rotate(160deg); border-radius: 50%; padding: 25px; background: linear-gradient(var(--v), transparent 50%, #4c4c4e 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #4c4c4e 0); -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }.box2 { --v: calc( ((18/5) * var(--p) - 90)*1deg); position: absolute; width: 194px; left: 1.6vh; top: 6px; height: 193px; transform: rotate(160deg); border-radius: 50%; padding: 12px; background: linear-gradient(var(--v), transparent 50%, #8a8989 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #8a8989 0); -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; }.box3 { --v: calc( ((18/5) * var(--p) - 90)*1deg); background: linear-gradient(var(--v), transparent 50%, #b7ff00 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #b7ff00 0); -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box-float"> <div class="box" style="--p:68;"></div> <div class="box2" style="--p:68;"></div> <div class="box2 box3" style="--p:50;"></div> </div>