问pace进度条完成后如何显示内容？
EN

Stack Overflow用户

提问于 2019-04-09 10:26:57

回答 1查看 107关注 0票数 0

我正在尝试让'wrapper‘中的内容只在pace进度条完成加载后淡入

有人有什么建议吗？这是pen https://codepen.io/anon/pen/VNmBWQ

Pace.on("done", function(){
  $(".wrapper").fadeIn(3000);
});

jquery

pace

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-09 11:04:54

 $(function() {
        Pace.on("done", function(){
          $(".wrapper").fadeIn(1000);
        });
    });

body {
      margin: 0px;
      background-color: #ff6666;
    }

    h1 {
      padding-top: 200px;
    }
            body {
      margin: 0px;
      background-color: #ff6666;
    }

    h1 {
      padding-top: 200px;
    }
        .wrapper
        {
          display:none;
        }
      .pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: rgba(34, 153, 221, 0.19999999999999996);
  position: fixed;
  z-index: -1;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 100%;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"></script>
    <script src="https://raw.githubusercontent.com/HubSpot/pace/v1.0.0/pace.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pace/0.4.1/themes/pace-theme-fill-left.css">



    <body >
      <div class="wrapper">
      
      <h1>Lorem Ipsum Velit, in at aenean vitae urna dictumst risus viverra inceptos aliquam! Tincidunt cum morbi morbi cum bibendum fermentum quam euismod vitae. Senectus lacinia vestibulum euismod pulvinar cursus orci rhoncus urna. Mi sodales sollicitudin in eleifend himenaeos ipsum penatibus elit per. Gravida tempus ullamcorper et semper accumsan lorem at auctor velit. Pulvinar primis class mi vitae nisl ad orci consequat lobortis urna phasellus. Dolor ut non conubia libero mollis enim suscipit, adipiscing fermentum. Nullam praesent, iaculis luctus massa lobortis dapibus habitant sit curabitur nisi consectetur. Felis dignissim quis habitant porttitor cum mauris, conubia.

    Cras metus montes dictum potenti ridiculus habitant neque litora ligula? Praesent lectus potenti pellentesque. Dolor facilisis rutrum eleifend! Ipsum velit fames habitant integer. Sagittis erat mattis morbi; nullam aenean torquent erat accumsan tempor. Iaculis donec maecenas sollicitudin natoque mi nibh ultricies curabitur nisl venenatis rhoncus. Tempor mi hendrerit quam vitae sit metus.

    Accumsan erat arcu ligula sit tristique inceptos fusce dictum lacus. Eros maecenas semper fringilla. Tempor fringilla fusce non quam congue sollicitudin lobortis mi id! Potenti, hendrerit odio pulvinar. Netus porta platea arcu vestibulum curabitur volutpat. Dui ante dis blandit congue quis eu luctus laoreet velit dictumst mollis? Varius suspendisse sollicitudin tristique lectus. Pellentesque lobortis velit maecenas congue. Egestas ante donec hac porta lectus accumsan? Hendrerit platea curae; mollis iaculis sollicitudin turpis hendrerit. Elementum!

    Auctor sollicitudin aliquam vulputate purus arcu congue gravida! Platea purus, eros egestas nisl lacinia ultricies consectetur scelerisque orci fusce praesent rhoncus! Habitasse penatibus quisque ligula nibh? Nisi suspendisse in urna libero ridiculus a tellus parturient enim libero sed. Fermentum lectus auctor erat vitae tempus himenaeos ad placerat ornare egestas ligula? Netus euismod rhoncus volutpat in id arcu nulla magna eros torquent facilisis dui. Dis condimentum rhoncus senectus primis!

    Morbi sagittis, feugiat aenean. Per placerat vitae condimentum arcu nam ridiculus pulvinar quis ultricies. Amet mi fames ridiculus ultrices tristique arcu vivamus quis eros libero. Rutrum euismod vel posuere accumsan fringilla congue dictum. Quis auctor nam quam turpis. Lectus malesuada ornare, egestas suscipit netus a velit ligula ipsum ipsum ultrices eleifend. Fusce gravida.
        Velit, in at aenean vitae urna dictumst risus viverra inceptos aliquam! Tincidunt cum morbi morbi cum bibendum fermentum quam euismod vitae. Senectus lacinia vestibulum euismod pulvinar cursus orci rhoncus urna. Mi sodales sollicitudin in eleifend himenaeos ipsum penatibus elit per. Gravida tempus ullamcorper et semper accumsan lorem at auctor velit. Pulvinar primis class mi vitae nisl ad orci consequat lobortis urna phasellus. Dolor ut non conubia libero mollis enim suscipit, adipiscing fermentum. Nullam praesent, iaculis luctus massa lobortis dapibus habitant sit curabitur nisi consectetur. Felis dignissim quis habitant porttitor cum mauris, conubia.

    Cras metus montes dictum potenti ridiculus habitant neque litora ligula? Praesent lectus potenti pellentesque. Dolor facilisis rutrum eleifend! Ipsum velit fames habitant integer. Sagittis erat mattis morbi; nullam aenean torquent erat accumsan tempor. Iaculis donec maecenas sollicitudin natoque mi nibh ultricies curabitur nisl venenatis rhoncus. Tempor mi hendrerit quam vitae sit metus.

    Accumsan erat arcu ligula sit tristique inceptos fusce dictum lacus. Eros maecenas semper fringilla. Tempor fringilla fusce non quam congue sollicitudin lobortis mi id! Potenti, hendrerit odio pulvinar. Netus porta platea arcu vestibulum curabitur volutpat. Dui ante dis blandit congue quis eu luctus laoreet velit dictumst mollis? Varius suspendisse sollicitudin tristique lectus. Pellentesque lobortis velit maecenas congue. Egestas ante donec hac porta lectus accumsan? Hendrerit platea curae; mollis iaculis sollicitudin turpis hendrerit. Elementum!

    Auctor sollicitudin aliquam vulputate purus arcu congue gravida! Platea purus, eros egestas nisl lacinia ultricies consectetur scelerisque orci fusce praesent rhoncus! Habitasse penatibus quisque ligula nibh? Nisi suspendisse in urna libero ridiculus a tellus parturient enim libero sed. Fermentum lectus auctor erat vitae tempus himenaeos ad placerat ornare egestas ligula? Netus euismod rhoncus volutpat in id arcu nulla magna eros torquent facilisis dui. Dis condimentum rhoncus senectus primis!

    Morbi sagittis, feugiat aenean. Per placerat vitae condimentum arcu nam ridiculus pulvinar quis ultricies. Amet mi fames ridiculus ultrices tristique arcu vivamus quis eros libero. Rutrum euismod vel posuere accumsan fringilla congue dictum. Quis auctor nam quam turpis. Lectus malesuada ornare, egestas suscipit netus a velit ligula ipsum ipsum ultrices eleifend. Fusce gravida.
    Velit, in at aenean vitae urna dictumst risus viverra inceptos aliquam! Tincidunt cum morbi morbi cum bibendum fermentum quam euismod vitae. Senectus lacinia vestibulum euismod pulvinar cursus orci rhoncus urna. Mi sodales sollicitudin in eleifend himenaeos ipsum penatibus elit per. Gravida tempus ullamcorper et semper accumsan lorem at auctor velit. Pulvinar primis class mi vitae nisl ad orci consequat lobortis urna phasellus. Dolor ut non conubia libero mollis enim suscipit, adipiscing fermentum. Nullam praesent, iaculis luctus massa lobortis dapibus habitant sit curabitur nisi consectetur. Felis dignissim quis habitant porttitor cum mauris, conubia.

    Cras metus montes dictum potenti ridiculus habitant neque litora ligula? Praesent lectus potenti pellentesque. Dolor facilisis rutrum eleifend! Ipsum velit fames habitant integer. Sagittis erat mattis morbi; nullam aenean torquent erat accumsan tempor. Iaculis donec maecenas sollicitudin natoque mi nibh ultricies curabitur nisl venenatis rhoncus. Tempor mi hendrerit quam vitae sit metus.

    Accumsan erat arcu ligula sit tristique inceptos fusce dictum lacus. Eros maecenas semper fringilla. Tempor fringilla fusce non quam congue sollicitudin lobortis mi id! Potenti, hendrerit odio pulvinar. Netus porta platea arcu vestibulum curabitur volutpat. Dui ante dis blandit congue quis eu luctus laoreet velit dictumst mollis? Varius suspendisse sollicitudin tristique lectus. Pellentesque lobortis velit maecenas congue. Egestas ante donec hac porta lectus accumsan? Hendrerit platea curae; mollis iaculis sollicitudin turpis hendrerit. Elementum!

    Auctor sollicitudin aliquam vulputate purus arcu congue gravida! Platea purus, eros egestas nisl lacinia ultricies consectetur scelerisque orci fusce praesent rhoncus! Habitasse penatibus quisque ligula nibh? Nisi suspendisse in urna libero ridiculus a tellus parturient enim libero sed. Fermentum lectus auctor erat vitae tempus himenaeos ad placerat ornare egestas ligula? Netus euismod rhoncus volutpat in id arcu nulla magna eros torquent facilisis dui. Dis condimentum rhoncus senectus primis!

    Morbi sagittis, feugiat aenean. Per placerat vitae condimentum arcu nam ridiculus pulvinar quis ultricies. Amet mi fames ridiculus ultrices tristique arcu vivamus quis eros libero. Rutrum euismod vel posuere accumsan fringilla congue dictum. Quis auctor nam quam turpis. Lectus malesuada ornare, egestas suscipit netus a velit ligula ipsum ipsum ultrices eleifend. Fusce gravida!!

    </h1>
        </div>
    </body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55584254

复制

相似问题

问pace进度条完成后如何显示内容？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问pace进度条完成后如何显示内容？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问pace进度条完成后如何显示内容？
EN