Question

我希望我的 gif 动画在页面完全加载后淡出。现在加载后仍然显示 gif。我尝试了一些fadeOut javascript，但整个页面都淡出了。如果您能提供帮助，将不胜感激，这是我的代码。

var $body = $('.loading');

var loading = [{
    elements: $body,
    properties: {
      width: '3%'
    }
  },
  {
    elements: $body,
    properties: {
      width: '60%'
    }
  },
  {
    elements: $body,
    properties: {
      width: '90%'
    }
  },
  {
    elements: $body,
    properties: {
      width: '100%'
    }
  },
  {
    elements: $body,
    properties: {
      height: '1260px'
    },
    options: {
      complete: function() {
        $('.wrap').velocity('transition.slideLeftIn');
        $('html').css({
          background: 'white'
        });
      }
    }
  }
];

$.Velocity.RunSequence(loading);

<style>.loading {
  background: url("../img/icon.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 40px;
  min-height: 100px;
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.wrap {
  opacity: 0;
  transform: none;
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loading">
  <div class="wrap">contents</div>
</div>

Answer 1

您可以使用 fadeOut jquery 函数，然后删除或隐藏元素。

$('.wrap').fadeOut( 1000, function() {
    $('.wrap').remove();
});

在您的代码中实现：

var loading = [
    { elements: $body, properties: { width: '3%' } },
    { elements: $body, properties: { width: '60%' } },
    { elements: $body, properties: { width: '90%' } },
    { elements: $body, properties: { width: '100%' } },
    { elements: $body, properties: { height: '1260px' }, options: { 
      complete: function () { 
        $('.wrap').fadeOut( 1000, function() {
           $('.wrap').remove();
        });
      }
    }
  }
];

然后在文档准备好后调用该函数。

$(document).ready(function(){
     $.Velocity.RunSequence(loading);
})

Answer 2

此代码有效

$('.loading').css('background', 'transparent');

页面完全加载后如何修复加载gif？

2 个答案: