如何在jquery中动画化元素
如何在jquery中动画化元素
提问于 2022-08-08 17:16:44
我正在尝试使用jquery动画我的元素。代码的目的是作为我的服务器上的一个速度计，我想要动画的元素叫做box3。
注意到：对于您来说，代码可能与我看起来不一样。代码正在FiveM服务器上运行
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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-08-08 17:24:17
我知道这不是直接回答你的问题。但我强烈建议不要使用JQuery。它的使用寿命很长，但现在有许多新的、高效的和不太臃肿的图书馆可用。
对于使用JS做动画，我建议查看https://animejs.com/
下面是一个代码依赖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>
`;
}如果您必须使用jQuery，那么只需使用类似的东西。
Codemen.io/rpandrews/pen/zaxNyK
$('speedElement').css("transform", "rotate(" + speed_Angle_Variable + ")");或
// 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73281750
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号