Показать сообщение отдельно
  #1 (permalink)  
Старый 24.09.2018, 10:25
Профессор
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 167

Как переписать функции fadeIn, fadeOut в нативном javascripte?
Есть блоки, которые замещают один одного при клике на кнопку без перезагрузки страницы. Код я написал используя 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>&nbsp;&nbsp;&nbsp;<a id='go' href=''>Поехали!</a></p>
</div>
<div id="second">
  <p>Товарищи! дальнейшее развитие различных форм деятельности способствует подготовки и реализации направлений прогрессивного развития. Задача организации, в особенности же реализация намеченных плановых заданий требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.</p>
</div>
Ответить с цитированием