![](/img/trans.png)
[英]jQuery - Animate backgroundColor, depending on width percentage
[英]Jquery animate width percentage for bootstrap progress not working
实际上我在项目中有 2 个表单,如果用户完成一个表单并单击提交,他将被带到下一个表单,所以我使用顶部的进度条显示表单进度。
如果用户完成第一个表单进度将动画宽度设置为 50%,如果用户完成第二个表单进度将动画宽度设置为 100%。
问题是宽度为 50% 的动画工作正常,但宽度为 100% 的动画会抛出一些更高的范围值,例如 315.***%,这会使进度条无法正确设置动画。
下面是小提琴的链接,其中 button1(50%) 用于第一种形式,而 button2(100%) 用于第二种形式。
https://jsfiddle.net/mohamedmusthafac/yeaht53q/
这是下面的jquery代码:-
$(document).ready(function(){
$("#but1").on("click", function(){
$(".progress-bar").stop().animate({width:'50%'}, 1500);
});
$("#but2").on("click", function(){
$(".progress-bar").stop().animate({width:'100%'},1500).stop();
});
});
你已经给出了一个解决方案,但看起来行为可能是 jQuery animate 函数的行为方式。 我想我会提供一个答案来解释这种行为。 我不确定这是错误还是预期行为。 对我来说,它看起来更像是一个错误。
当您调用 animate 函数时,它会在内部调用一个 adjustCSS 函数。 调用 adjustCSS 的调用栈很长(animate() -> dequeue() -> doAnimation() -> Animation() -> jquery.map() -> createTween() -> Animation.Tweeners.*0 > adjustCSS ()) 以防万一,如果您对流程感兴趣。
在adjustCSS内部,代码执行路径在进度条为0%时采用不同的路线,在进度条为50%时采用不同的路线。
如果你看到了 adjustCSS
function adjustCSS( elem, prop, valueParts, tween ) {
var adjusted,
scale = 1,
maxIterations = 20,
currentValue = tween ?
function() {
return tween.cur();
} :
function() {
return jQuery.css( elem, prop, "" );
},
initial = currentValue(),
unit = valueParts && valueParts[ 3 ] || ( jQuery.cssNumber[ prop ] ? "" : "px" ),
// Starting value computation is required for potential unit mismatches
initialInUnit = ( jQuery.cssNumber[ prop ] || unit !== "px" && +initial ) &&
rcssNum.exec( jQuery.css( elem, prop ) );
if ( initialInUnit && initialInUnit[ 3 ] !== unit ) {
// Trust units reported by jQuery.css
unit = unit || initialInUnit[ 3 ];
// Make sure we update the tween properties later on
valueParts = valueParts || [];
// Iteratively approximate from a nonzero starting point
initialInUnit = +initial || 1;
do {
// If previous iteration zeroed out, double until we get *something*.
// Use string for doubling so we don't accidentally see scale as unchanged below
scale = scale || ".5";
// Adjust and apply
initialInUnit = initialInUnit / scale;
jQuery.style( elem, prop, initialInUnit + unit );
// Update scale, tolerating zero or NaN from tween.cur()
// Break the loop if scale is unchanged or perfect, or if we've just had enough.
} while (
scale !== ( scale = currentValue() / initial ) && scale !== 1 && --maxIterations
);
}
if ( valueParts ) {
initialInUnit = +initialInUnit || +initial || 0;
// Apply relative offset (+=/-=) if specified
adjusted = valueParts[ 1 ] ?
initialInUnit + ( valueParts[ 1 ] + 1 ) * valueParts[ 2 ] :
+valueParts[ 2 ];
if ( tween ) {
tween.unit = unit;
tween.start = initialInUnit;
tween.end = adjusted;
}
}
return adjusted;
}
当您单击第一个按钮时,initialInUnit 为 0,并且不会通过 if 条件
if ( initialInUnit && initialInUnit[ 3 ] !== unit ) {
它直接跳到
if ( valueParts ) {
但是当您第二次单击按钮时,它会通过上面的第一个 if 条件,因为进度条已经处于其 50% 的宽度。 现在,使百分比达到 315% 或出现的任何数字的原因是奇怪的行为所在。
当它通过 if 条件时,有一个语句:
jQuery.style( elem, prop, initialInUnit + unit );
这里 jQuery 将元素的 width 属性样式设置为 initialInUnit 中的值,它是进度条的宽度,以像素为单位,并以 % 为单位附加单位。 因此,它不是将宽度从 50% 动画化到 100%,而是将宽度从 315% 动画化到 100%。 315% 可以根据进度条的宽度而变化。
事实上,你甚至不需要第二个按钮来复制行为,如果你点击按钮 1 秒,你可以看到它从 315%(或其他)到 50% 的动画。
所以我不确定它是否是一个错误(尽管它看起来像一个)。 调整后的CSS 可能适用于其他条件。 向 jQuery 团队提出问题以检查 adjustCSS 函数中 initialInUnit 值分配的预期行为可能是值得的。
该adjustCSS功能的jQuery代码一部分,看到这里
我通过使用以下代码得到了解决方案,但我仍然不知道,为什么我没有使用上述方法得到解决方案
$("#but2").on("click", function(){
$('.progress-bar').animate({'width':($('.progress-bar').parent().width())+'px'}, 3000);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.