进度进度条完成后如何显示内容?

时间:2019-04-09 02:26:57

标签: jquery pace

我试图让“包装器”中的内容仅在进度条完成加载后才会消失

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

JS

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

1 个答案:

答案 0 :(得分:1)

 $(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>