gpt4 book ai didi

javascript - jQuery - 动画背景颜色,取决于宽度百分比

转载 作者:行者123 更新时间:2023-11-28 18:01:09 25 4
gpt4 key购买 nike

我正在为我的设备规范页面构建排名/得分条,我有一个使用 transitionanimation 的基本动画,但结束结果不是我想要的。为了让您满意,CSS 代码保留在原位(禁用了 animation 属性),并且 this is currently how it stands - JSFiddle of the same thing .

A previous question of mine是让动画工作,这取决于栏的百分比,我目前使用的方法来自该问题中的选定答案。不幸的是,最终结果虽然不错,但并没有提供我最初想要的功能。

例如,目前的情况是,在页面加载时提供特定的背景颜色,然后进行过渡。

我最理想的是在我的 CSS 中启用 animation 属性时得到的结果,但同样,这也有其自身的问题。它更接近我的目标,但不是解决方案。

我正在寻找的是这样的东西(希望我已经解释得足够好)。所有这些对背景颜色的更改都应该在过渡(宽度)发生时发生。

  • width 等于 0% 到 24% 时,背景颜色应为红色,因此条形开始时为红色 - #a41818

  • 如果 width 等于 25% 到 49%,背景颜色应该从红色渐变为橙色 - #87581c

  • 如果 width 等于 50% 到 74%,背景颜色应该从橙色渐变为黄色 - #997815

  • 如果 width 等于 75% 到 89%,背景颜色应该从黄色逐渐变为绿黄色 - #659a1f

  • 如果 width 等于 25% 到 49%,背景颜色应该从绿黄色渐变为绿色 - #3a8d24

此外,如果宽度恰好保持在特定百分比,例如 56%,则条形背景颜色应保持与其百分比范围相对应的颜色。在这种情况下,56% 为黄色。如果条形宽度为 12%,颜色应保持红色等。

如果您需要更多详细信息,或者需要进一步说明任何内容,请务必告诉我。

谢谢!

最佳答案

如果我理解正确的话,您只想根据动画时所处的百分比来动画颜色。这是正确的吗?

如果是这样,并且根据您在示例中提供的内容,我建议您查看 jQuery 的 animate函数并使用 step 回调来检查动画中的每一步。

这是我迄今为止结合使用 css 和 jquery 进行的试验。我很想看到一个完整的 CSS 示例!

jQuery

// wrap this in an anonymous to help namespace collisions
// and to help with faster variable lookup.
;(function (document, $) {

$(document).ready(function () {
$('.rating-bar').each(function () {
var _this = $(this),
size = _this.data('size');

_this.animate({
width: size + '%'
}, {
duration: 2500,
step: function (progress) {
_this.css({
backgroundColor: progressColor(progress)
});
}
});
});
});

function progressColor(progress) {
if (progress >= 0 && progress <= 24) return '#a41818';
else if (progress >= 25 && progress <= 49) return '#87581c';
else if (progress >= 50 && progress <= 74) return '#997815';
else if (progress >= 75 && progress <= 89) return '#659a1f';
else if (progress >= 90 && progress <= 100) return '#659a1f';
}
})(document, jQuery);

更新后的 CSS

#rank-bar {
margin: 1em 0 2em 0;
}
#rank-bar-score {
display: inline-block;
}
#ranks-js {
margin-bottom: 1.5em;
}
.rating-bar {
width: 0;
line-height: 2;
background-color: #1a1a1a;
outline: none;
-moz-border-radius: 2px 0 0 2px;
-webkit-border-radius: 2px 0 0 2px;
border-radius: 2px 0 0 2px;
-moz-transition: background-color 0.5s linear 0s;
-webkit-transition: background-color 0.5s linear 0s;
transition: background-color 0.5s linear 0s;
}
.rating-bar-bg {
width: auto;
background-color: #1a1a1a;
margin: 0.5em 0 0 1em;
border: 1px solid #090909;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.rating-bar-bg-overall {
width: auto;
background-color: #1a1a1a;
margin: 0.5em 0;
border: 1px solid #090909;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.rb-label {
width: 10em;
max-width: 350px;
display: block;
color: #ebebeb;
font-weight: bold;
text-shadow: 2px 1px 0 #222222;
text-transform: uppercase;
margin-left: 0.5em;
}
#overall {
font-size: 1.25em;
}

JSFiddle

编辑:我已经从 fiddle 中添加了更新后的 css。

编辑 2:有关简单示例,请参见 JSFiddle .

关于javascript - jQuery - 动画背景颜色,取决于宽度百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20378830/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com