我有一个函数可以动画div的宽度,以便在用户输入表单信息时模拟进度条。当输入的信息比动画更快时,它会在动画之间暂停,然后再次开始,使动画不稳定。
当用户在上一个字段的动画完成之前完成下一个表单字段的输入时,如何使动画更流畅?
HTML
<div id="container">
<div class="stepProgress">
<div id="currentProgress"></div>
</div>
<div class="formContainer">
<input id="firstName" type="text" class="k-textbox progInput" placeholder="First Name" />
<input id="lastName" type="text" class="k-textbox progInput" placeholder="Last Name" />
<input id="userName" type="text" class="k-textbox progInput" placeholder="User Name" />
<input id="userEmail" type="text" class="k-textbox progInput" placeholder="Email" />
</div>
</div>
CSS
.stepProgress {
height: 10px;
width: 100%;
}
#currentProgress {
width: 0px;
height: 100%;
background-color: #00BFF2;
}
#container {
width: 500px;
height: 300px;
border: 1px solid black;
}
.formContainer {
margin-top: 20px;
}
input {
display: block;
margin: 10px;
}
JS
$(document).ready(function() {
var inputCount = $('.progInput').length;
function stepProgress() {
inputFilled = 0;
$('.progInput').each(function(i, e) {
if ($(e).val()) inputFilled++;
});
var pct = (inputFilled / inputCount) * 100;
$('#currentProgress').animate({
width: pct + "%"
}, 800);
if (pct === 100) {
$('#currentProgress').animate({
backgroundColor: '#608341'
});
} else {
$('#currentProgress').animate({
backgroundColor: '#00BFF2',
});
}
}
$('.progInput').change(function() {
stepProgress();
});
});
的jsfiddle
答案 0 :(得分:1)
你可以像这样使用css过渡:
的CSS:
#currentProgress {
width: 0px;
height: 100%;
background-color: #00BFF2;
transition: width .8s;
}
脚本:
$(document).ready(function() {
var inputCount = $('.progInput').length;
function stepProgress() {
inputFilled = 0;
$('.progInput').each(function(i, e) {
if ($(e).val()) inputFilled++;
});
var pct = (inputFilled / inputCount) * 100;
$('#currentProgress').css('width', pct + "%");
if (pct === 100) {
$('#currentProgress').animate({
backgroundColor: '#608341'
});
} else {
$('#currentProgress').animate({
backgroundColor: '#00BFF2',
});
}
}
$('.progInput').change(function() {
stepProgress();
});
});
使用此脚本,您只需更改宽度attr和css执行动画。