Question

我正在创建一个包含进度指示器的多步骤表单。单击btn1，我想更改第一个进度条的背景色。我的问题是，使用jQuery animate似乎无法正常工作。谁能帮我这个忙。

$(document).ready(function() {

  $("#btn1").click(function() {
    $('#progressbar li:nth-child(2):after ').animate({
      backgroundColor: '#99cc00'
    }, 2500); //does nothing
  });
});

#progressbar li:nth-child(2):after {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  left: -50%;
  top: 20px;
  z-index: 1;
  /*put it behind the numbers*/
}

#progressbar li:nth-child(3):after {
  content: "";
  width: 100%;
  height: 2px;
  background: #B2B2B2;
  position: absolute;
  left: -50%;
  top: 20px;
  z-index: 1;
  /*put it behind the numbers*/
}

#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}

#progressbar li.active:before,
#progressbar li.active:after {
  /*background: #27AE60;
        	color: white;
        	display: inline-block;*/
  border-radius: 50%;
  background: #000;
  width: 45px;
  height: 46px;
  font-size: 22px;
  margin-top: 0px;
  padding: 16px;
  text-align: center;
  font-family: Objectivity-Regular;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1">Animate height</button>

Answer 1

如评论中所述，您无法使用jQuery设置伪元素的动画，因为无法选择它。另外，除非添加特殊的插件，否则该框架不允许对颜色进行动画处理。

另一种选择是在单击时将一个类添加到父元素，然后transition伪元素的背景。实际上，CSS支持彩色动画。

$(function() {

  var item = $('#progressbar li:nth-child(2)');

  $('#btn1').click(function() {
    item.addClass('bright');
  });

  $('#btn2').click(function() {
    item.removeClass('bright');
  });
});

#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  counter-reset: step;
}

#progressbar li {
  list-style-type: none;
  color: white;
  text-transform: uppercase;
  font-size: 16px;
  width: 33.33%;
  float: left;
  position: relative;
  font-family: Objectivity-Regular;
}

#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  line-height: 20px;
  display: block;
  border-radius: 50%;
  color: #fff;
  width: 45px;
  height: 46px;
  font-size: 22px;
  padding: 16px;
  position: relative;
  z-index: 99;
  text-align: center;
  font-family: Objectivity-Regular;
  background: #B2B2B2;
  margin: 0 auto 10px auto;
}

#progressbar li:after {
  content: "";
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: 1;
}

#progressbar li:nth-child(2):after {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  left: -50%;
  top: 20px;
  z-index: 1;
}

#progressbar li:nth-child(3):after {
  content: "";
  width: 100%;
  height: 2px;
  background: #B2B2B2;
  position: absolute;
  left: -50%;
  top: 20px;
  z-index: 1;
}

#progressbar li.active:before {
  border-radius: 50%;
  background: #000;
  width: 45px;
  height: 46px;
  font-size: 22px;
  margin-top: 0px;
  padding: 16px;
  text-align: center;
  font-family: Objectivity-Regular;
  color: #fff;
}

#progressbar li:before {
  transition: background 2500ms;
}

#progressbar li.bright:before {
  background-color: #99cc00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn1">Add color</button>
<button id="btn2">Reset color</button>

<ul id="progressbar">
  <li class="active">GRADE</li>
  <li>STUDENT<br>INFORMATION</li>
  <li>FINISH<br>APPLICATION</li>
</ul>

除了调整点击处理程序之外，这还添加了所有内容：

#progressbar li:before {
  transition: background 2500ms;
}

#progressbar li.bright:before {
  background-color: #99cc00;
}

对使用伪类和伪元素的元素进行动画处理

1 个答案: