Реализация методов fadeOut и fadeIn из jQuery на JavaScript

Описанные в заголовке методы jQuery (fadeOut и fadeIn) позволяют скрыть/показать элемент за счет плавного изменения его прозрачности. Если вы бывалый программист, который не использует jQuery (а на сколько вы знаете, jQuery позволяет во многом упросить написание кода и его объем за счет готовых методов и объектов), то могли задаваться вопросом о том, как реализовать подобный функционал на чистом JavaScript.

С этой задачей столкнулся и я, и вот какое решение мне удалось раздобыть.

Метод fadeOut из jQuery на чистом JavaScript

Итак, по сути, реализация обоих методов идентична за исключением некоторых моментов, и первая функция (метод fadeOut – сокрытие) будет выглядеть следующим образом:

function fadeOut(el) {
  
	var opacity = 1;
  
	var timer = setInterval(function() {
    
		if(opacity <= 0.1) {
		
			clearInterval(timer);
			document.querySelector(el).style.display = "none";
	
		}
	
		document.querySelector(el).style.opacity = opacity;
     
		opacity -= opacity * 0.1;
   
	}, 10);

}

Использование:

fadeOut(".content");

Здесь «.content» – это класс элемента, для которого применяем нашу функцию. Скорость появления вы задаете в методе setInterval, в нашем случае это значение – 10.

Метод fadeIn из jQuery на чистом JavaScript

С помощью следующей несложной функции вы сможете плавно показать нужный вам элемент.

Функция выглядит следующим образом:

function fadeIn(el) {
  
	var opacity = 0.01;
  
	document.querySelector(el).style.display = "block";
  
	var timer = setInterval(function() {
    
		if(opacity >= 1) {
			
			clearInterval(timer);
		
		}
		
		document.querySelector(el).style.opacity = opacity;
     
		opacity += opacity * 0.1;
   
	}, 10);
	
}

И пример ее использования:

fadeIn(".content");

Настройки скорости как в первом варианте, задаются в методе setInterval, а «.content» – это идентификатор элемента, для которого мы применяем нашу функцию.