Fadein fadeout function in javascript

PlainJS: fade-in & fade-out

We use fade-in and -out animations on elements to give our users a more pleasant experience when they view our website or app. We use them for elements that get lazyloaded, toggled or whenever we want to make the appearance/ disappearance of something look smooth.

Back in the days most developers probably used jQuery to do the job since it was part of most websites anyway and provided a very convenient way to do it (fadeIn/ fadeOut). With jQuery slowly fading out from web development I want to show in this article how to make a fadeIn and fadeOut function in plain javascript.

In order to make an element fade-in/fade-out we essentially need to change its opacity from 0 to 1 in a timeframe that is detectable for the human eye. Please note that changing the opacity of an element can also be done purely via CSS3 and if we just need to do that it is the most preferable because most performant solution. The way how to achieve this with CSS3 would be to either use the

• set the opacity of the element to either zero or 1 (depending on whether fade-in or fade-out is desired)
• set transition: [property] [time] [easing] => for example transition: opacity .4s ease
• apply via javascript a new class .fadein/.fadeout to the element with opacity set to zero (fade-out) or 1 (fade-in)

• create a new keyframe animation @keyframe fadein (or @keyframe fadeout) that goes from opacity: 0 to opacity: 1 (or opacity: 1 to opacity: 0)
• apply via javascript a new class .fadein/.fadeout that has all required animation properties => e.g. animation: fadein .4s linear

However, with both of these techniques an element that gets faded out still would occupy blank space. It would be invisible but not gone (similar to visibility: hidden). Sometimes we want the element to be gone and not take any space after it is faded out. We want it to be set to display: none. We can achieve this easily with Javascript.

Please note that I am using ES6 syntax. If you are not familiar with this please see my es6 article series and keep in mind that it needs to be transpiled to ES5 for older browsers via babel.io.

fadeIn

First we assign an anonymus function to our variable fadeIn that has an element (el) as it’s first parameter, an option to make a smooth fade-in animation which defaults to true as it’s second parameter and displayStyle ‘block’ as default for it’s third parameter. We start with setting the elements opacity to zero and apply display: block because we assume that it’s current value could be display: none. If smooth is not false we declare a variable with let opacity, starting from zero, and also declare another variable let request, without assigning any value yet.

Afterwards we create another anonymus function that is bound to the variable animation and sets the opacity of our element equal to the result of the value from our previously declared opacity variable plus 0.04. After the first iteration the value would be 0 + 0.04 = 0.04, in the second round 0.08 and so on until it reaches the condition being higher or equal to 1.

I chose 0.04 as it creates a fadeIn animation in approximately 400ms. Feel free to play with the numbers to make it optimal for your case. You can use console.time() (in the beginning of your function run) and console.timeEnd() (in the end of your function run) to understand the timings.

Once the condition is passed we make sure that opacity is exactly one and cancel our animation frame (see next step) via the cancelAnimationFrame(fn) method.

We use requestAnimationFrame for creating the iteration because this way we give the control to the browser when to re-render the layout and not force it on it as we would do with either setTimeout or setInterval. The “problem” with using a recursive setTimeout or setInterval for drawing our animations is that we command the browser at a predefined time to run our animation. Since the browser is single threaded this intervention could lead to a sluggish experience as other javascript (potentially with other animations) may need to be executed too. With requestAnimationFrame the browser controls the redrawing of the layout at an eye-friendly approximate 60hz framerate and provides us with a smooth animation that is not conflicting with any other javascript tasks which may run simultaneously. To be fair it is unlikely that our fade-in or fade-out animation would cause a sluggish experience for the user because it is very fast over but it is generally good practice to use requestAnimationFrame for animations and that’s why we will go with it.

We assign an anonymus function to our rAf variable that assigns a recursive call to itself via the requestAnimationFrame method. In other words we let the function call itself. Please be careful when you do recursive calls and always define a condition under which it gets cancelled. Otherwise you will create an infinite loop and crash your system/ browser.

We assign the function call to our variable request which we declared earlier. The reason we declared request outside of the rAf function is scope. We need to be able to access it via the cancelAnimationFrame method from within the animation function. We run animation and alter the opacity of our element on each iteration.

Finally we call our rAf function to get it all started. In case you wonder about the else condition which runs when smooth is set to false: Technically it does ruin the “fadein experience” because it would set the element’s opacity “instantly” to 1 but it makes the function more versatile and we can achieve that only with a few lines of code.

fadeOut

The fadeOut method is basically an inverted function of our previous explained fadeIn method. I will not go through it in such detail because it is essentially the same as the fadein method just altering the opacity from 1 back to zero and applying display: none in the end right before the iteration gets stopped to leave no blank space behind.

Источник

Реализация методов 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 document.querySelector(el).style.opacity = opacity; opacity -= opacity * 0.1; >, 10); >

Здесь «.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); >

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

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

Источник

doctor Brain

Итак, JQuery, как мне кажется, медленно, но верно, уходит в прошлое. Именно поэтому я решил перенести свои проекты с JQuery на чистый JavaScript (Vanilla JS). Результат получился вполне удовлетворительным.

Если Вы соберетесь поступить так же, помните, что все, что сделано на JQuery, можно сделать на чистом JavaScript. Правда, этот процесс займет чуть больше времени, потому что объем написанного Вами кода несколько увеличится.

Не скрою, что возможностью скрывать и показывать выбранные элементы с помощью JQuery я пользовался довольно часто. Но как же реализовать эффекты fadeIn и fadeOut на чистом JavaScript.

Оказалось, это достаточно просто:

// ** FADE OUT FUNCTION ** function fadeOut(el) < el.style.opacity = 1; (function fade() < if ((el.style.opacity -= .1) < 0) < el.style.display = "none"; >else < requestAnimationFrame(fade); >>)(); >; // ** FADE IN FUNCTION ** function fadeIn(el, display) < el.style.opacity = 0; el.style.display = display || "block"; (function fade() < var val = parseFloat(el.style.opacity); if (!((val += .1) >1)) < el.style.opacity = val; requestAnimationFrame(fade); >>)(); >; 

Надеюсь, что код приведенный выше кому-нибудь пригодится.

Перевод статьи Bruno Vieira “Vanilla JS FadeIn/Out”.

Новые публикации

JavaScript: сохраняем страницу в pdf

HTML: Полезные примеры

CSS: Ускоряем загрузку страницы

JavaScript: 5 странностей

JavaScript: конструктор сортировщиков

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.

© 2021 dr.Brain .
мир глазами веб-разработчика

Источник

jQuery Effects — Fading

With jQuery you can fade elements in and out of visibility.

Click to fade in/out panel

Because time is valuable, we deliver quick and easy learning.

At W3Schools, you can study everything you need to learn, in an accessible and handy format.

Examples

jQuery fadeIn()
Demonstrates the jQuery fadeIn() method.

jQuery fadeOut()
Demonstrates the jQuery fadeOut() method.

jQuery fadeToggle()
Demonstrates the jQuery fadeToggle() method.

jQuery fadeTo()
Demonstrates the jQuery fadeTo() method.

jQuery Fading Methods

With jQuery you can fade an element in and out of visibility.

jQuery has the following fade methods:

jQuery fadeIn() Method

The jQuery fadeIn() method is used to fade in a hidden element.

The optional speed parameter specifies the duration of the effect. It can take the following values: «slow», «fast», or milliseconds.

The optional callback parameter is a function to be executed after the fading completes.

The following example demonstrates the fadeIn() method with different parameters:

Example

jQuery fadeOut() Method

The jQuery fadeOut() method is used to fade out a visible element.

The optional speed parameter specifies the duration of the effect. It can take the following values: «slow», «fast», or milliseconds.

The optional callback parameter is a function to be executed after the fading completes.

The following example demonstrates the fadeOut() method with different parameters:

Example

jQuery fadeToggle() Method

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.

If the elements are faded out, fadeToggle() will fade them in.

If the elements are faded in, fadeToggle() will fade them out.

The optional speed parameter specifies the duration of the effect. It can take the following values: «slow», «fast», or milliseconds.

The optional callback parameter is a function to be executed after the fading completes.

The following example demonstrates the fadeToggle() method with different parameters:

Example

jQuery fadeTo() Method

The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).

The required speed parameter specifies the duration of the effect. It can take the following values: «slow», «fast», or milliseconds.

The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).

The optional callback parameter is a function to be executed after the function completes.

The following example demonstrates the fadeTo() method with different parameters:

Example

jQuery Exercises

jQuery Effects Reference

For a complete overview of all jQuery effects, please go to our jQuery Effect Reference.

Источник