Question

我正在尝试复制http://www.alessioatzeni.com/的加载页面，但在加载线动画完成之前，我的页面上加载的百分比文本将不会显示。您可以在https://jaredblumer.github.io/atzeniStudy/

看到我的项目页面

如果您使用Chrome开发者工具检查HTML，您会看到＃loader-percentage span文本正在动态更新，但由于我不知道的原因，文本直到线动画结束后才会显示。

我目前使用的代码如下：

HTML

<div id="loader" class="loader">
  <span id="loader-line" class="loader-line">
    <span id="loader-percentage" class="loader-percentage"></span>
  </span>

</div>

Javascript（loader.js）

$(document).ready(function() {

  //Loading Page
  var pageLoader = function() {

    var $elements = $('body').find('img[src]');

    $('body [style]').each(function(){
      var src = $(this).css('background-image').replace(/^url\(["']?/, '').replace(/["']?\)$/, '');

      if(src) {
        $elements = $elements.add($('<img src="' + src + '"/>'));
      }
    });

    var $loading = $('#loader');
    var $loadPercentageLine = $('#loader-line');
    var $loadPercentageText = $('#loader-percentage');
    var elementsLoaded = 0;
    var speed = 5000;

    var animatePercentage = function(e) {

      console.log(e);
      $loadPercentageText.text(parseInt(e));

    };

    var loading = function() {

      var percentage = 0;

      if ($elements.length) {
        percentage = parseInt((elementsLoaded / $elements.length) * 100);
      }

      $loadPercentageLine.stop().animate({
        height:percentage + '%'
      }, speed);

      $loadPercentageText.stop().animate({
        percentage:percentage
      }, {
        duration: speed,
        step: animatePercentage
      });
    };

    if($elements.length) {
      loading();

      $elements.each(function() {
        elementsLoaded++;
        loading();
      });
    }
  };

  pageLoader();

});

Answer 1

这是解决方案：

.loader-line{
    overflow: visible !important;
}

如何在其他jQuery动画中显示移动文本字段？

1 个答案: