Syntax:
x = in || out
fade.x.selector("element", duration);
O parâmetro "element" corresponde a um seletor CSS.
fade.x.get(element, duration);
fade.x.query(element, duration);
aliás de fade.x.get()
Em fade.x.get e fade.x.query o parâmetro element pode ser querySelector, getElementById, nextElementSibling, parentElement etc..
O parâmetro duration é opcional. O padrão é 400 milissegundos.
fade.in.
Exemplo :
Direto no HTML
<button class="btn" onclick="fade.in.get(this.nextElementSibling, 650)">Clique para exibir o elemento</button>
<div style="display: none;">
<p>
<strong>Olá mundo!</strong><br>
Aparecimento gradual com atributo <code>onclick</code> direto no elemento HTML.
</p>
</div>
Script externo
<button class="open-next btn">Clique para exibir o elemento</button>
<div class="open-this-btn-click">
<p>Solicitação a resposta do click com aparecimento gradual.</p>
</div>
// Primeiro display=none no elemento (pode ser com attributo style direto no HTML)
document.querySelector(".open-this-btn-click").style.display = "none";
// Método selector
document.querySelector(".open-next").addEventListener('click', function() {
fade.in.selector(".open-this-btn-click", 500);
});
// OU:
// Método get e/ou query
document.querySelector(".open-next").addEventListener('click', function() {
fade.in.get(document.querySelector(".open-this-btn-click"), 400);
});
fade.out.
Exemplo 1:
Clique no icone da lixeira para fechar/"deletar" o próprio elemento.
Direto no HTML
<div>
<p>Clique no icone da lixeira para fechar/"deletar" o próprio elemento.</p>
<span icon="trash" size="30" onclick="fade.out.get(this.parentElement, 500)"></span>
</div>
Script externo
<div class="close-element">
<p>Clique no icone da lixeira para fechar/"deletar" o próprio elemento.</p>
<span id="close-parent" icon="trash" size="30"></span>
</div>
document.querySelector("#close-parent").addEventListener('click', function() {
fade.out.selector(".close-element", 500);
});
document.querySelector("#close-parent").addEventListener('click', function() {
fade.out.get(document.querySelector(".close-element"), 400);
});
Exemplo 2:
Clique no botão acima para fechar esse elemento.
Direto no HTML
<button class="btn" onclick="fade.out.get(this.nextElementSibling, 500)">Fechar</button>
<div>
<p>Clique no botão acima para fechar esse elemento.</p>
</div>
Script externo
<button class="close-next btn">Fechar</button>
<div class="close-this-btn-click">
<p>Clique no botão acima para fechar esse elemento.</p>
</div>
document.querySelector(".close-next").addEventListener('click', function() {
fade.out.selector(".close-this-btn-click", 500);
});
document.querySelector(".close-next").addEventListener('click', function() {
fade.out.get(document.querySelector(".close-this-btn-click"), 400);
});
fade.in. e fade.out.
Exemplo 1:
Direto no HTML
<button class="btn" onclick="fade.in.get(this.nextElementSibling, 700)">Clique para exibir o elemento</button>
<div style="display: none;">
<p>Clique no ícone da lixeira para ocultar/descartar este elemento.</p>
<span icon="trash" size="30" onclick="fade.out.get(this.parentElement, 600)"></span>
</div>
Script externo
<button class="btn" id="open">Clique para exibir o elemento</button>
<div id="fade-element">
<p>Clique no ícone da lixeira para ocultar/descartar este elemento.</p>
<span id="close" icon="trash" size="30"></span>
</div>
document.querySelector("#fade-element").style.display = "none";
document.querySelector("#open").addEventListener('click', function() {
fade.in.selector("#fade-element", 700);
});
document.querySelector("#close").addEventListener('click', function() {
fade.out.get(document.querySelector("#fade-element"), 600);
});
Exemplo 2:
Direto no HTML
<button class="btn" onclick="fade.in.selector('.fade-in-out', 700)">Clique para exibir o elemento</button>
<button class="btn" onclick="fade.out.selector('.fade-in-out', 600)">Clique para fechar o elemento</button>
<div class="fade-in-out" style="display: none;">
<p>Hello World.</p>
</div>
Script externo
<button id="open" class="btn">Clique para exibir o elemento</button>
<button id="close" class="btn">Clique para fechar o elemento</button>
<div id="fade-element">
<p>Hello World.</p>
</div>
document.querySelector("#fade-element").style.display = "none";
document.querySelector("#open").addEventListener('click', function() {
fade.in.selector("#fade-element", 700);
});
document.querySelector("#close").addEventListener('click', function() {
fade.out.get(document.querySelector("#fade-element"), 600);
});
let fade = {
fadeIn: function(selection, duration = 400) {
var start, begin, startime, time, effect, currentime, timediff, show;
if( selection.style.getPropertyValue("display") == "none" ) {
selection.style.opacity = "0";
selection.style.display = "none";
start = 1;
begin = parseFloat(selection.style.opacity) || 0;
startime = Date.now();
time = 1000 / 60;
effect = setInterval(() => {
currentime = Date.now();
timediff = (currentime - startime) / duration;
show = begin - (begin - start) * timediff;
selection.style.opacity = show.toString();
if(timediff >= 1) {
clearInterval(effect);
effect = 1;
selection.style.opacity = "1";
}
if(timediff * timediff) {
selection.style.display = "block";
}
}, time);
}
else {
return;
}
},
in: {
get: function(element, duration = 400) {
return fade.fadeIn(element, duration);
},
query: function(element, duration = 400) {
return this.get(element, duration);
},
selector: function(element, duration = 400) {
return fade.fadeIn(document.querySelector(element), duration);
}
},
fadeOut: function(selection, duration = 400) {
var start, begin, startime, time, effect, currentime, timediff, show;
if(
selection.style.getPropertyValue("display") == "block" ||
selection.style.getPropertyValue("display") == false
) {
start = 0;
begin = parseFloat(selection.style.opacity) || 1;
startime = Date.now();
time = 1000 / 60;
effect = setInterval(() => {
currentime = Date.now();
timediff = (currentime - startime) / duration;
show = begin - (begin - start) * timediff;
if(timediff >= 1) {
clearInterval(effect);
effect = 0;
selection.style.opacity = "0";
selection.style.display = "none";
}
if(timediff * timediff) {
selection.style.opacity = show.toString();
}
}, time);
}
else {
return;
}
},
out: {
get: function(element, duration = 400) {
return fade.fadeOut(element, duration);
},
query: function(element, duration = 400) {
return this.get(element, duration);
},
selector: function(element, duration = 400) {
return fade.fadeOut(document.querySelector(element), duration);
}
}
};