Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как переписать функции fadeIn, fadeOut в нативном javascripte? (https://javascript.ru/forum/jquery/75330-kak-perepisat-funkcii-fadein-fadeout-v-nativnom-javascripte.html)

giwuf 24.09.2018 10:25

Как переписать функции 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>

рони 24.09.2018 10:43

giwuf,
http://youmightnotneedjquery.com/#fade_in

giwuf 24.09.2018 10:56

Цитата:

Сообщение от рони (Сообщение 495320)

рони, спасибо
а в чем будет отличие fadeout и как в нее поместить параметры типа 'normal' ?

рони 24.09.2018 11:10

giwuf,
а подумать
400 это и есть 'normal'
Цитата:

Сообщение от giwuf
будет отличие fadeout

от 1 к 0
function fadeOut(el) {
  el.style.opacity = 1;// 1

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity - (new Date() - last) / 400;//-
    last = +new Date();

    if (+el.style.opacity > 0) {// >0
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

рони 24.09.2018 11:16

giwuf,
может смены класса будет достаточно?

giwuf 24.09.2018 12:05

Цитата:

Сообщение от рони
giwuf,
а подумать
400 это и есть 'normal'
Сообщение от giwuf
будет отличие fadeout
от 1 к 0

Точно! Спасибо!
Цитата:

Сообщение от рони
giwuf,
может смены класса будет достаточно?

рони,
смены класса у блока?

рони 24.09.2018 12:15

Цитата:

Сообщение от giwuf
смены класса у блока?

да

giwuf 24.09.2018 16:01

Цитата:

Сообщение от рони (Сообщение 495331)
да

ок, спасибо


Часовой пояс GMT +3, время: 19:36.