Есть блоки, которые замещают один одного при клике на кнопку без перезагрузки страницы. Код я написал используя
jquery, но теперь думаю, как его переписать в нативном
js, чтобы исключить загрузку библиотеки. Особенно интересует как заменить функции
fadeIn,
fadeOut на равноценные
js.
$(function() {
$('#go').click(function() {
appearance('#start', '#second');
return false;
});
var appearance = function(slide, content) {
$(slide).hide('fast', showNewContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
function showNewContent() {
$(content).show('normal', hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
};
});
#load {
display: none;
position: absolute;
right: 10px;
top: 10px;
width: 43px;
height: 11px;
text-indent: -9999em;
}
#second {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="start">
<p><strong>Вы готовы к старту?</strong> <a id='go' href=''>Поехали!</a></p>
</div>
<div id="second">
<p>Товарищи! дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. Задача организации, в особенности же реализация намеченных плановых заданий требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.</p>
</div>
