从左到右使图表条具有动画效果

Question

我希望使条形图具有动画效果，但希望条形图从左到右具有动画效果。到目前为止，它们都是同时运行的。

我怎样才能做到这一点呢？

​

$(function() {
  $("#bars li .bar").each(function() {
    var percentage = $(this).data('percentage');

    $(this).animate({
      'height': percentage + '%'
    }, 1000);
  });
});

@import "lesshat";
@import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
body {
  background: #30303A;
  font-family: Roboto;
}

#chart {
  width: 650px;
  height: 300px;
  margin: 30px auto 0;
  display: block;
}

#chart #numbers {
  width: 50px;
  height: 100%;
  margin: 0;
  padding: 0;
  display: inline-block;
  float: left;
}

#chart #numbers li {
  text-align: right;
  padding-right: 1em;
  list-style: none;
  height: 29px;
  border-bottom: 1px solid #444;
  position: relative;
  bottom: 30px;
}

#chart #numbers li:last-child {
  height: 30px;
}

#chart #numbers li span {
  color: #eee;
  position: absolute;
  bottom: 0;
  right: 10px;
}

#chart #bars {
  display: inline-block;
  background: rgba(0, 0, 0, 0.2);
  width: 600px;
  height: 300px;
  padding: 0;
  margin: 0;
  box-shadow: 0 0 0 1px #444;
}

#chart #bars li {
  display: table-cell;
  width: 100px;
  height: 300px;
  margin: 0;
  text-align: center;
  position: relative;
}

#chart #bars li .bar {
  display: block;
  width: 70px;
  margin-left: 15px;
  background: #49E;
  position: absolute;
  bottom: 0;
}

#chart #bars li .bar:hover {
  background: #5AE;
  cursor: pointer;
}

#chart #bars li .bar:hover:before {
  color: white;
  content: attr(data-percentage) '%';
  position: relative;
  bottom: 20px;
}

#chart #bars li span {
  color: #eee;
  width: 100%;
  position: absolute;
  bottom: -2em;
  left: 0;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart">
  <ul id="bars">
    <li>
      <div data-percentage="56" class="bar"></div><span>Option 1</span></li>
    <li>
      <div data-percentage="33" class="bar"></div><span>Option 2</span></li>
    <li>
      <div data-percentage="54" class="bar"></div><span>Option 3</span></li>
    <li>
      <div data-percentage="94" class="bar"></div><span>Option 4</span></li>
    <li>
      <div data-percentage="23" class="bar"></div><span>Option 5</span>
    </li>
  </ul>
</div>

​

View on JSFiddle

Answer 1

您可以根据索引调整时间，以便最右侧的栏需要更长时间才能设置动画。

$("#bars li .bar").each( function( index ) {
    var percentage = $(this).data('percentage');
    console.log(percentage)
    $(this).animate({
      'height' : percentage + '%'
    }, 1000 + index * 500);
});

​

$(function() {
  $("#bars li .bar").each( function( index ) {
    var percentage = $(this).data('percentage');
    $(this).animate({
      'height' : percentage + '%'
    }, 1000 + index * 500);
  });
});

@import "lesshat";
 @import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
 body {
     background: #30303A;
     font-family: Roboto;
}
 #chart {
     width: 650px;
     height: 300px;
     margin: 30px auto 0;
     display: block;
}
 #chart #numbers {
     width: 50px;
     height: 100%;
     margin: 0;
     padding: 0;
     display: inline-block;
     float: left;
}
 #chart #numbers li {
     text-align: right;
     padding-right: 1em;
     list-style: none;
     height: 29px;
     border-bottom: 1px solid #444;
     position: relative;
     bottom: 30px;
}
 #chart #numbers li:last-child {
     height: 30px;
}
 #chart #numbers li span {
     color: #eee;
     position: absolute;
     bottom: 0;
     right: 10px;
}
 #chart #bars {
     display: inline-block;
     background: rgba(0,0,0,0.2);
     width: 600px;
     height: 300px;
     padding: 0;
     margin: 0;
     box-shadow: 0 0 0 1px #444;
}
 #chart #bars li {
     display: table-cell;
     width: 100px;
     height: 300px;
     margin: 0;
     text-align: center;
     position: relative;
}
 #chart #bars li .bar {
     display: block;
     width: 70px;
     margin-left: 15px;
     background: #49E;
     position: absolute;
     bottom: 0;
}
 #chart #bars li .bar:hover {
     background: #5AE;
     cursor: pointer;
}
 #chart #bars li .bar:hover:before {
     color: white;
     content: attr(data-percentage) '%';
     position: relative;
     bottom: 20px;
}
 #chart #bars li span {
     color: #eee;
     width: 100%;
     position: absolute;
     bottom: -2em;
     left: 0;
     text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart">  
  <ul id="bars">
    <li><div data-percentage="56" class="bar"></div><span>Option 1</span></li>
    <li><div data-percentage="33" class="bar"></div><span>Option 2</span></li>
    <li><div data-percentage="54" class="bar"></div><span>Option 3</span></li>
    <li><div data-percentage="94" class="bar"></div><span>Option 4</span></li>
    <li><div data-percentage="23" class="bar"></div><span>Option 5</span>
    </li>
  </ul>
</div>

​

为了等待前一个动画结束，可以使用索引计算延迟。

$("#bars li .bar").each( function( index ) {
    var percentage = $(this).data('percentage');
    console.log(percentage)
    $(this).delay(index * 1000).animate({
      'height' : percentage + '%'
    }, 1000);
});

​

$(function() {
  $("#bars li .bar").each( function( index ) {
    var percentage = $(this).data('percentage');
    $(this).delay(index * 1000).animate({
      'height' : percentage + '%'
    }, 1000);
  });
});

@import "lesshat";
 @import url(https://fonts.googleapis.com/css?family=Roboto:400+700);
 body {
     background: #30303A;
     font-family: Roboto;
}
 #chart {
     width: 650px;
     height: 300px;
     margin: 30px auto 0;
     display: block;
}
 #chart #numbers {
     width: 50px;
     height: 100%;
     margin: 0;
     padding: 0;
     display: inline-block;
     float: left;
}
 #chart #numbers li {
     text-align: right;
     padding-right: 1em;
     list-style: none;
     height: 29px;
     border-bottom: 1px solid #444;
     position: relative;
     bottom: 30px;
}
 #chart #numbers li:last-child {
     height: 30px;
}
 #chart #numbers li span {
     color: #eee;
     position: absolute;
     bottom: 0;
     right: 10px;
}
 #chart #bars {
     display: inline-block;
     background: rgba(0,0,0,0.2);
     width: 600px;
     height: 300px;
     padding: 0;
     margin: 0;
     box-shadow: 0 0 0 1px #444;
}
 #chart #bars li {
     display: table-cell;
     width: 100px;
     height: 300px;
     margin: 0;
     text-align: center;
     position: relative;
}
 #chart #bars li .bar {
     display: block;
     width: 70px;
     margin-left: 15px;
     background: #49E;
     position: absolute;
     bottom: 0;
}
 #chart #bars li .bar:hover {
     background: #5AE;
     cursor: pointer;
}
 #chart #bars li .bar:hover:before {
     color: white;
     content: attr(data-percentage) '%';
     position: relative;
     bottom: 20px;
}
 #chart #bars li span {
     color: #eee;
     width: 100%;
     position: absolute;
     bottom: -2em;
     left: 0;
     text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart">  
  <ul id="bars">
    <li><div data-percentage="56" class="bar"></div><span>Option 1</span></li>
    <li><div data-percentage="33" class="bar"></div><span>Option 2</span></li>
    <li><div data-percentage="54" class="bar"></div><span>Option 3</span></li>
    <li><div data-percentage="94" class="bar"></div><span>Option 4</span></li>
    <li><div data-percentage="23" class="bar"></div><span>Option 5</span>
    </li>
  </ul>
</div>

​