Как переписать функции fadeIn, fadeOut в нативном javascripte?

152
10 января 2019, 23:50

Есть блоки, которые замещают один одного при клике на кнопку без перезагрузки страницы. Код я написал используя 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>

Answer 1

let btn = document.getElementById('btn'); 
let target = document.getElementById('target'); 
btn.onclick = function() { 
  target.toggleFade('fast'); 
} 
 
Element.prototype.fadeOut = function(type) { 
  let tickSpeed = 1000 / 60; 
  let opacitySpeed = 0.02; 
  let opacity = Number(window.getComputedStyle(this).opacity); 
  let that = this; 
  if (type == 'slow') { 
    opacitySpeed = 0.01; 
  } else if (type == 'fast') { 
    opacitySpeed = 0.03; 
  } 
  let fadeOutTimer = setInterval(function() { 
    if (opacity <= 0) { 
      clearInterval(fadeOutTimer); 
      opacity = 0; 
      that.style.opacity = opacity; 
      fadeOutTimer = null; 
      that.isFade = false; 
      return true; 
    } else if (fadeOutTimer !== null) { 
      that.style.opacity = opacity -= opacitySpeed; 
    } 
  }, tickSpeed); 
} 
 
Element.prototype.fadeIn = function(type) { 
  let tickSpeed = 1000 / 60; 
  let opacitySpeed = 0.02; 
  let opacity = Number(window.getComputedStyle(this).opacity); 
  let that = this; 
  if (type == 'slow') { 
    opacitySpeed = 0.01; 
  } else if (type == 'fast') { 
    opacitySpeed = 0.03; 
  } 
  let fadeInTimer = setInterval(function() { 
    if (opacity >= 1) { 
      clearInterval(fadeInTimer); 
      opacity = 1; 
      that.style.opacity = opacity; 
      fadeInTimer = null; 
      that.isFade = true; 
      return true; 
    } else if (fadeInTimer !== null) { 
      that.style.opacity = opacity += opacitySpeed; 
    } 
  }, tickSpeed); 
 
} 
Element.prototype.isFade = true; 
Element.prototype.toggleFade = function(type) { 
  if (this.isFade) { 
    target.fadeOut(type); 
  } else { 
    target.fadeIn(type); 
  } 
}
#target { 
  width: 100px; 
  height: 100px; 
  background: #333; 
  opacity: 1; 
}
<button id="btn"> 
Toggle 
</button> 
<br><br> 
<div id="target"> 
 
</div>

READ ALSO
Как добавить новый тег после другого тега внутри тега?
javascript

Как добавить новый тег после другого тега внутри тега?

Надо внутри тега article добавить новый тег hr после каждого p( c помощью js)Попробовал такой способ:

 171
Как вывести значение JSON файла в тег input
javascript

Как вывести значение JSON файла в тег input

Может вопрос и очень тупой, но всё же Как мне строку из JSON файла занести в input, что бы в дальнейшем получить возможность редактировать её?

 157
Дергается к верху сайт после загрузки анимации
javascript

Дергается к верху сайт после загрузки анимации

Ссылка на сайт! Для анимации использовалась библиотека animationcss Если открыть на мобиле, то при загрузке очередного блока с анимацией сайт...

 154
Отслеживать изменение роута
javascript

Отслеживать изменение роута

Необходимо, чтобы с определенного экрана нельзя было уйти, пока не завершишь, например, сделкуТо есть в роутере прописано /action/:actionId - ActionProcessComponent

 174