Preloader Hidding Effect

Question

Preloader Hidding Effect

1

Я пытаюсь добавить функцию preloader на свою страницу. Это было сделано. но предварительный загрузчик исчезает, как показано ниже.

Вот мой код.

    $(document).ready(function() {
    //Preloader
    $(window).load(function() {
    preloaderFadeOutTime = 5000;
    function hidePreloader() {
    var preloader = $('.spinner-wrapper');
    preloader.fadeOut(preloaderFadeOutTime);
    }
    hidePreloader();
    });
    });

.spinner-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 999999;
}

.spinner.windcatcher {
  margin: 0 auto;
  top: 46%;
  left: 48%;
  border: 0;
  position: absolute;
  width: 4em;
  perspective: 50em;
  -webkit-animation: rotate 4s linear infinite;
  animation: rotate 4s linear infinite;
}

.spinner.windcatcher .blade {
  height: 0.5em;
  background: red;
  margin-bottom: 0.1em;
  -webkit-animation: windcatcherSpin 4s linear infinite, windcatcherBg 2s linear infinite;
  animation: windcatcherSpin 4s linear infinite, windcatcherBg 2s linear infinite;
}

.spinner.windcatcher .blade:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; }
.spinner.windcatcher .blade:nth-child(2) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
.spinner.windcatcher .blade:nth-child(3) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.spinner.windcatcher .blade:nth-child(4) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; }
.spinner.windcatcher .blade:nth-child(5) { -webkit-animation-delay: 1s; animation-delay: 1s; }
.spinner.windcatcher .blade:nth-child(6) { -webkit-animation-delay: 1.25s; animation-delay: 1.25s; }
.spinner.windcatcher .blade:nth-child(7) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.spinner.windcatcher .blade:nth-child(8) { -webkit-animation-delay: 1.75s; animation-delay: 1.75s; }

<div class="spinner-wrapper">  
  <div class="controls"></div>
  <div class="spinner windcatcher" id="windcatcher">
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
  </div>
</div>

На приведенном выше рисунке Preloader - Fadeout справа налево. Но мне нужно, чтобы это не должно быть Fadeout справа налево. Он должен исчезать из текущей позиции. Пожалуйста помоги.

Спасибо.

Melbin Mathai 02 авг. 2017, в 07:18

Источник

0

Можете ли вы положить свой образец в JsFiddle ?
Firanolfind 02 авг. 2017, в 05:18
0

.hide - это jQuery, и вот как он скрывается ... попробуйте вместо этого fadeOut - это также jQuery
Jaromanda X 02 авг. 2017, в 05:24
0

@JaromandaX Я уже так пробовал. Тот же результат
Melbin Mathai 02 авг. 2017, в 05:26
0

@ Firanolfind Вот скрипка. jsfiddle.net/5owfu397
Melbin Mathai 02 авг. 2017, в 05:27
0

Вот ваша скрипка jsfiddle.net/5owfu397/3 с использованием fadeOut и добавлением jQuery (потому что вы этого не сделали в оригинале) и setTimeout вместо window.load, потому что он не запускался для меня - но вы можете видеть, fadeOut это то, что вы хотите, как я сказал
Jaromanda X 02 авг. 2017, в 05:31
0

@JaromandaX Спасибо Jaromansa X. Это работает.
Melbin Mathai 02 авг. 2017, в 05:34
0

Отлично, так что вы сделали не так, когда утверждали, что I am already tried that way. Same result getting ?
Jaromanda X 02 авг. 2017, в 05:35
0

@JaromandaX Это была моя ошибка. На самом деле в моем коде это Hide вместо fadeOut. После этого только я вхожу в мой код. В любом случае, спасибо.
Melbin Mathai 02 авг. 2017, в 05:39

Показать ещё 6 комментариев

Теги:

javascript

html5

css3

1 ответ

Ещё вопросы

Можете ли вы положить свой образец в JsFiddle ?
.hide - это jQuery, и вот как он скрывается ... попробуйте вместо этого fadeOut - это также jQuery
@JaromandaX Я уже так пробовал. Тот же результат
Вот ваша скрипка jsfiddle.net/5owfu397/3 с использованием fadeOut и добавлением jQuery (потому что вы этого не сделали в оригинале) и setTimeout вместо window.load, потому что он не запускался для меня - но вы можете видеть, fadeOut это то, что вы хотите, как я сказал
@JaromandaX Спасибо Jaromansa X. Это работает.
Отлично, так что вы сделали не так, когда утверждали, что I am already tried that way. Same result getting ?
@JaromandaX Это была моя ошибка. На самом деле в моем коде это Hide вместо fadeOut. После этого только я вхожу в мой код. В любом случае, спасибо.

Firanolfind · Accepted Answer · 2017-08-02T04-14-00.000Z

Попробуйте использовать .fadeOut вместо метода .hide.

Пример JSFiddle