我正在尝试创建一个带有进度指示器的多步骤表单,但我正在努力为进度条设置动画,我想要一个简单的动画,单击时将宽度从 0 增加到 100。
我已经创建了我正在使用的内容的副本:https://jsfiddle.net/1zb9p8xo/
这也是我的代码:
$(document).ready(function() {
$('.next').click(function() {
$('.current').removeClass('current').hide().next().show().addClass('current');
$('#progressbar li.active').next().addClass('active');
if ($('#progress')) {};
});
$('.previous').click(function() {
$('.current').removeClass('current').hide().prev().show().addClass('current');
$('#progressbar li.active').removeClass('active').prev().addClass('active');
});
});
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
fieldset {
border: none;
padding: 0;
}
#helpdeskform {
position: relative;
}
#helpdeskform .field2,
.field3 {
display: none;
}
#helpdeskform .action-button {
width: 100px;
cursor: pointer;
}
#progressbar {
overflow: hidden;
background-color: #f6f6f6;
counter-reset: step;
padding: 0;
box-sizing: border-box;
color: #f6f6f6!important;
position: relative;
}
#progressbar li {
list-style-type: none;
width: 33.333%;
height: 100%;
float: left;
position: relative;
color: #f6f6f6;
position: relative;
}
#progressbar li:before {
content: counter(step);
width: auto;
color: transparent;
display: block;
background: transparent;
}
#progressbar li.active:before,
#progressbar li.active:after {
background: #69bd45;
margin-left: 0px;
-webkit-transition: width 2s, height 4s;
/* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form id="helpdeskform" action="process.php" method="post">
<!-- Progress Bar -->
<ul id="progressbar">
<li class="active first" style="width: 33.33%;"></li>
<li class="second"></li>
<li class="last"></li>
</ul>
<fieldset class="field1 current">
<h2>Dashboard name</h2>
<!-- Input -->
<input type="text" name="dashboardName" placeholder="Dashboard name" />
<!-- Controls -->
<input type="button" name="next" class="next action-button nextOne" value="Next" />
</fieldset>
<fieldset class="field2">
<h2>Dashboard name</h2>
<!-- Input -->
<input type="text" name="dashboardName" placeholder="Dashboard name" />
<!-- Controls -->
<input type="button" name="next" class="next action-button nextTwo" value="Next" />
<input type="button" name="previous" class="previous action-button" value="previous" />
<button>submit</button>
</fieldset>
<fieldset class="field3">
<h2>Dashboard name</h2>
<!-- Input -->
<input type="text" name="dashboardName" placeholder="Dashboard name" />
<!-- Controls -->
<input type="button" name="previous" class="previous action-button" value="previous" />
<button>submit</button>
</fieldset>
</form>
最佳答案
无需为进度栏中的每个步骤创建单独的元素,只需使用单个元素,并为其宽度设置动画:
<!-- Progress Bar -->
<div id="progressbar">
<div class="progress"></div>
</div>
并使用一些 CSS 对其进行样式设置:
#progressbar .progress {
height: 20px;
background: #69bd45;
width: 0;
transition: .5s;
}
现在让我们看一下它的 JS:
$(document).ready(function() {
//Number of steps in all
var steps = 3;
//Current step
var current = 1;
//progress element
var progress = $('#progressbar .progress');
//Function to update progress bar's value
function updateProgress() {
progress.css("width", 100 / steps * current + "%");
}
//Call once on page load to set the initial value
updateProgress();
$('.next').click(function() {
current++;
$('.current').removeClass('current').hide().next().show().addClass('current');
updateProgress();
});
$('.previous').click(function() {
current--;
$('.current').removeClass('current').hide().prev().show().addClass('current');
updateProgress();
});
});
如果你熟悉 JS,这很简单。首先,我声明您想要的步骤数,以及一个保存当前步骤的变量。然后我做了一个简单的函数来根据当前步骤更改进度条宽度。
之后,您所要做的就是将当前步骤变量设置为您想要显示的任何步骤,然后调用 updateProgress()
。
$(document).ready(function() {
//Number of steps in all
var steps = 3;
//Current step
var current = 1;
//progress element
var progress = $('#progressbar .progress');
function updateProgress() {
progress.css("width", 100 / steps * current + "%");
}
updateProgress();
$('.next').click(function() {
current++;
$('.current').removeClass('current').hide().next().show().addClass('current');
updateProgress();
});
$('.previous').click(function() {
current--;
$('.current').removeClass('current').hide().prev().show().addClass('current');
updateProgress();
});
});
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
fieldset {
border: none;
padding: 0;
}
#helpdeskform {
position: relative;
}
#helpdeskform .field2,
.field3 {
display: none;
}
#helpdeskform .action-button {
width: 100px;
cursor: pointer;
}
#progressbar .progress {
height: 20px;
background: #69bd45;
width: 0;
transition: .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="helpdeskform" action="process.php" method="post">
<!-- Progress Bar -->
<div id="progressbar">
<div class="progress"></div>
</div>
<fieldset class="field1 current">
<h2>Dashboard name</h2>
<!-- Input -->
<input type="text" name="dashboardName" placeholder="Dashboard name" />
<!-- Controls -->
<input type="button" name="next" class="next action-button nextOne" value="Next" />
</fieldset>
<fieldset class="field2">
<h2>Dashboard name</h2>
<!-- Input -->
<input type="text" name="dashboardName" placeholder="Dashboard name" />
<!-- Controls -->
<input type="button" name="next" class="next action-button nextTwo" value="Next" />
<input type="button" name="previous" class="previous action-button" value="previous" />
<button>submit</button>
</fieldset>
<fieldset class="field3">
<h2>Dashboard name</h2>
<!-- Input -->
<input type="text" name="dashboardName" placeholder="Dashboard name" />
<!-- Controls -->
<input type="button" name="previous" class="previous action-button" value="previous" />
<button>submit</button>
</fieldset>
</form>
关于javascript - 点击时动画进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41509078/