javascript - 使 jQuery 函数以相同的速率延迟和加载

Question

我正在努力使这个 jQuery 函数正常工作，并尽我所知尝试了所有方法，但似乎无法获得我想要的结果。

我有 3 个“正在加载”技能栏，它们都以 2000 的相同速度发射，但它计算的是到达终点所需的时间。两个最高值将在一个非常低的值之前进行动画处理，但它们都在相同的最终点结束。我希望它们同时开始。

我还想将动画延迟大约 3-4 秒，因为我假设这是用户滚动到它们需要多长时间。

1 条的 HTML 代码

<div class="bar" data-percent="75%">
    <div class="tag" style="background: #27ae60;">
    <span>CSS</span>
  </div>
  <div class="load" style="background-color: #2ecc71;"></div>
  <div class="skill-bar-percent">75%</div>
</div>

jQuery

setTimeout(function(){
  $('.bar').each(function(){
    $(this).find('.load').animate({
      width:$(this).attr('data-percent')}, 2000);
  });
});

当然还有 [JS Fiddle[( http://jsfiddle.net/w2vb41g4/7/ )

有没有简单的方法解决这个问题？我尝试在整个函数中使用 .delay() 但没有成功。我也尝试设置一个单独的 .setTimeout() 函数，但也没有效果。

谢谢大家!

Answer 1

如评论中所述:

• 延迟很简单:只需将时间添加到您使用的setTimeout。例如加2秒(2000毫秒):

  setTimeout(function(){
    $('.bar').each(function(){
      $(this).find('.load').animate({
        width: $(this).attr('data-percent') }, 2000);
    });
  }, 2000);
  

• 对于同时开始的栏，只需将它们放在标题后面即可:

  .bar{ /* SKILL BAR */
    position: relative;
    background-color: #eee;
    width: 100%;
    height: 35px;
    border-radius: 5px;
    margin-top: 10px;
      overflow:hidden;
  }
  
  .load{ /* LOADING BAR */
    width: 0;
    height: 35px;
    border-radius: 0px 5px 5px 0px;
      position:absolute;
      top:0;
      left:110px;
  }
  

  (CSS 中还有一些其他的外观更改，它们不影响功能，只是为了让它看起来更好。在下面的 fiddle 中查看它们)

您可以看到它正在更新您的 fiddle :http://jsfiddle.net/w2vb41g4/14/

---

更新:这是让它增长到正确位置的代码(考虑到 110px):

setTimeout(function () {
    $('.bar').each(function () {
        $(this).find('.load').each(function () {
            $(this).animate({
                width: ($(this).parent().width() - 110) * $(this).parent().attr('data-percent') / 100
            }, 2000);
        });
    });
}, 2000);