Javascript Jquery为引导进程设置动画宽度百分比不起作用
实际上,我在项目中有两个表单,如果用户完成一个表单并单击submit,他将进入下一个表单,因此我使用顶部的进度条显示表单进度 如果用户完成第一个表单,进度将动画宽度设置为50%,如果用户完成第二个表单,进度将动画宽度设置为100% 问题是50%宽度的动画效果很好,但100%宽度的动画效果会抛出一些更高的范围值,如315.***%,这使得进度条无法正确设置动画 下面是小提琴的链接,其中按钮1(50%)表示第一种形式,按钮2(100%)表示第二种形式 下面是jquery代码:-Javascript Jquery为引导进程设置动画宽度百分比不起作用,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,实际上,我在项目中有两个表单,如果用户完成一个表单并单击submit,他将进入下一个表单,因此我使用顶部的进度条显示表单进度 如果用户完成第一个表单,进度将动画宽度设置为50%,如果用户完成第二个表单,进度将动画宽度设置为100% 问题是50%宽度的动画效果很好,但100%宽度的动画效果会抛出一些更高的范围值,如315.***%,这使得进度条无法正确设置动画 下面是小提琴的链接,其中按钮1(50%)表示第一种形式,按钮2(100%)表示第二种形式 下面是jquery代码:- $(documen
$(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();
});
});
我使用下面的代码得到了解决方案,但是我仍然不知道为什么我没有使用上面的方法得到解决方案
$("#but2").on("click", function(){
$('.progress-bar').animate({'width':($('.progress-bar').parent().width())+'px'}, 3000);
});
您已经给出了一个解决方案,但看起来该行为可能是jQuery animate函数的行为方式。我想我会提供一个答案来解释这种行为。我不确定这是一个bug还是有意的行为。在我看来,它更像一只虫子 当您调用animate函数时,它在内部调用adjustCSS函数。调用adjustCSS的调用堆栈相当长(animate()->dequeue()->doAnimation()->Animation()->jquery.map()->createTween()->Animation.tweens.*0>adjustCSS()),以防您对流感兴趣 在adjustCSS中,当进度条为0%时,代码执行路径采用一组不同的路由,当进度条为50%时,代码执行路径采用一组不同的路由 如果你看到了
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中的值,initialInUnit是进度条的宽度,以像素为单位,并以%为单位附加单位。因此,它不是将宽度从50%设置为100%,而是将宽度从315%设置为100%。这315%可能会根据进度条的宽度而改变
事实上,你甚至不需要第二个按钮来复制行为,如果你点击按钮1秒,你可以看到它的动画从315%(或其他)到50%
所以我不确定它是否是一个bug(尽管它看起来像一个bug)。调整后的CSS可能适用于其他条件。也许值得与jQuery团队讨论一个问题,以检查adjustCSS函数中initialInUnit值赋值的预期行为
adjustCSS函数是jQuery代码的一部分,正如我所期望的那样,因为我需要解释为什么这种行为会发生在我的同事身上