点击动画进度条

Question

我正在尝试使用渐变指示器创建一个多步骤表单，但我正在努力为进度条设置动画，我想要一个简单的动画，在点击时将宽度从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>

Answer 1

这个怎么样？

$(document).ready(function(){
	$(".button").click(function(){
  	$(".bar").animate({
    	width: "+=50px"
    },"fast");  
  })
})

.bar{
  width:0px;
  height:15px;
  background-color:#00FF00;
  display:inline-block;
}

.button{
  padding:5px;
  padding-left:10px;
  padding-right:10px;
  cursor:pointer;
  border:1px solid #CCCCCC;
  background-color:#FFFFFF;
  display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bar">

</div>
<br/>
<br/>
<div class="button">
Next
</div>

你可以根据你的需要改进它。（设置最大宽度，减慢速度等）

Answer 2

通过将width: auto中的#progressbar li:before替换为width:0，可以轻松修复前进方向中的进度条 - 请参阅下面的演示：

＆＃13;

＆＃13;

$(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();
  });
});

＆＃13;

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: 0;
  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%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

不要为进度条中的每个步骤创建单独的元素，只需使用单个元素，并为其宽度设置动画：

  <!-- 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()。

Updated JSFiddle

$(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>

Answer 4

use bootstrap progress bar 

<div class="progress">   
<div class="progress-bar" role="progressbar" aria-valuenow="70"    
aria-valuemin="0" aria-valuemax="100" style="width:70%">    
<span class="sr-only">70% Complete</span>      
</div>
</div>

you can change the width based on setting the value style="width:70%"at each step

查找信息：http：//www.w3schools.com/bootstrap/bootstrap_progressbars.asp

Answer 5

使用单个元素来跟踪进度

$("#next").on("click", function() {
    var width = $("#progress").width();
	$("#progress").animate({"width": "+=50"});
    if (width > 350) {
        $("#next").hide();
    }
});

$("#prev").on("click", function() {
    var width = $("#progress").width();
	$("#progress").animate({"width": "-=50"});
    if (width < 350) {
        $("#next").show();
    }
    if (width <= 70) {
        $("#prev").hide();
    }
});

#btn-group {
  margin-top: 10px;
}

#progress {
  width: 33%;
  height: 10px;
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="progress">
  </div>
</div>

<div id="btn-group">
  <button id="next">Next</button>
  <button id="prev">Previous</button>
  <button id="submit">Submit</button>
</div>

Answer 6

实际上不需要制作三个单独的字段集。您可以轻松地将所有内容保存在一个单独的div中。看看吧！

＆＃13;

＆＃13;

$(document).ready(function() {
  var times = 0;
  $('.next').click(function() {
    if (times < 2) {
      $('.progressbar').animate({
        width: "+=33.33%"
      }, 500);
      times++;
    }
    if (times > 0) {
      $('.submit, .previous').fadeIn();
    }
    if (times > 1) {
      $('.next').fadeOut();
    }
  });

  $('.previous').click(function() {
    if (times > 0) {
      $('.progressbar').animate({
        width: "-=33.33%"
      }, 500);
      times--;
    }
    if (times < 1) {
      $('.submit, .previous').fadeOut();
    }
    if (times < 2) {
      $('.next').fadeIn();
    }

  });

});

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.progressbar {
  overflow: hidden;
  background-color: green;
  counter-reset: step;
  padding: 0;
  box-sizing: border-box;
  color: green;
  position: relative;
  width: 33%;
  height: 30px;
}

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="helpdeskform" action="process.php" method="post">

  <div class="progressbar"></div>

  <div class="field2">

    <h2>Dashboard name</h2>

    <input type="text" name="dashboardName" placeholder="Dashboard name" />

    <input type="button" name="next" class="next action-button nextTwo" value="Next" />
    <input type="button" name="previous" class="previous action-button hidden" value="previous" />
    <button class='submit hidden'>submit</button>

  </div>

</form>

＆＃13;

＆＃13;

＆＃13;

Answer 7

您可以使用#progressbar功能为.animate()的宽度设置动画。 首先，您可以注释掉/删除$('#progressbar li.active').next().addClass('active');并将其替换为以下内容：

下一步

$('#progressbar li.active').animate({
    width: '+=33.33%'
});

以前的

$('#progressbar li.active').animate({
    width: '-=33.33%'
});