Как сделать такую анимацию?

Question

[BMO1337]

Всем привет друзья, есть такой скрипт..

<div id="page-preloader"></div>

#page-preloader {
	background: url(../images/preloader.gif) no-repeat center;
	background-color: rgba(42,42,42,1);
	width: 100%;
	height: auto;
	min-height: 100%;
	display: block;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100500;
}

$(window).on('load', function () {
    var $preloader = $('#page-preloader'),
        $spinner   = $preloader.find('.spinner');
    $spinner.fadeOut();
    $preloader.delay(350).fadeOut('slow');
});

Это обычный прелоадер для страницы, вопрос: Как сделать что бы он полностью загружал страницу и изчезал, и второй вопрос.. как сделать так что бы по окончании загрузки.. этот блок <div id="page-preloader"></div> плавно уезжал вверх. Спасибо.

Answer 1

[Сергей Комаров]

HTML:

<div id="page-preloader">
  <div class="spinner"></div>
</div>

jQuery:

$(window).load(function() {
  $(".spinner").fadeOut("fast");
  $("#page-preloader").slideUp("slow");
}

Comments

[BMO1337]

Так у меня идет безконечная загрузка страницы. Вы можете на jsfiddle пример сделать?

[Сергей Комаров]

BMO1337: Предпочитаю codepen, если вы не против :) codepen.io/anon/pen/RraqXo

[Сергей Комаров]

PS. в своем ответе я не закрыл скобку у load, видимо по этому у вас не отрабатывает. В конце еще нужно вот так дописать " ); "