J'ai du mal à faire fonctionner ce fondu sur mon "bouton3". Je commence à opacity = 10 et essaye de l'amener à 0.0 sur une minuterie. chaque réponse que je trouve pour un fondu est en dehors d'un eventListener, des suggestions?Comment faire un fondu de boîte à l'intérieur d'un EventListener sans requête J?
La meilleure chose serait d'ajouter une transition CSS avec une durée de temps de cette boîte, puis réglez l'opacité à 0 quand il est cliqué. Cela le fera disparaître.
CSS:
#button3{ transition: all 2s linear; }
JS:
document.getElementById("button3").addEventListener("click", function(){ box.style.opacity = 0; });
Ce que vous devez faire est d'utiliser setInterval puis clearInterval lorsque la cible est complètement visible (opacité = 1) ou complètement caché (opacité = 0). La solution suivante est juste JavaScript:
const btn = document.getElementById('btn-toggle-fade');
btn.addEventListener('click', (e) => {
\t const target = document.querySelector(e.target.dataset.target);
// Set default opacity value
if (!target.style.opacity) {
\t target.style.opacity = 1;
}
if (Number(target.style.opacity) === 1) {
\t const fadeOut = setInterval(() => {
\t if (Number(target.style.opacity) < 0.1) {
\t clearInterval(fadeOut);
} else {
\t target.style.opacity = Number(target.style.opacity) - 0.1;
}
}, 100);
} else {
\t const fadeIn = setInterval(() => {
\t if (Number(target.style.opacity) < 1) {
\t target.style.opacity = Number(target.style.opacity) + 0.1;
} else {
\t clearInterval(fadeIn);
}
}, 100);
}
});#my-div {
background: #000;
color: #fff;
height: 100px;
line-height: 100px;
width: 200px;
text-align: center;
}<button id="btn-toggle-fade" data-target="#my-div">
Toggle Fade
</button>
<div id="my-div">
Hello
</div>Mais, honnêtement, je pense que les éléments suivants (avec des transitions CSS) est meilleure:
const btn = document.getElementById('btn-toggle-fade');
btn.addEventListener('click', (e) => {
\t const target = document.querySelector(e.target.dataset.target);
if (target.classList.contains('visible')) {
\t target.classList.remove('visible');
target.classList.add('hidden');
} else {
\t target.classList.remove('hidden');
target.classList.add('visible');
}
});#my-div {
background: #000;
color: #fff;
height: 100px;
line-height: 100px;
width: 200px;
text-align: center;
}
.visible {
opacity: 1;
transition: opacity 2s linear;
visibility: visible;
}
.hidden {
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
visibility: hidden;
}<button id="btn-toggle-fade" data-target="#my-div">
Toggle Fade
</button>
<div id="my-div" class="visible">
Hello
</div>
S'il vous plaît poster le code avec {} de l'éditeur et non une image de code. – T4rk1n
S'il vous plaît voir ce premier [how-to-ask] (https://stackoverflow.com/help/how-to-ask) SO est une plate-forme où vous pouvez obtenir une bonne suggestion concernant vos problèmes. Mais pour cela, vous devez être plus précis sur ce que vous demandez? Qu'avez-vous fait jusqu'à présent? Avant de demander s'il vous plaît voir la question SO proposée et jetez un coup d'oeil à eux. Pourtant, vous n'avez pas trouvé de solution alors vous pouvez poser une question ici. –
Que ce soit dans un écouteur d'événement n'est pas pertinent: le code de fondu fonctionnant en dehors d'un écouteur fonctionnera aussi à l'intérieur. Le problème avec votre fonction est que vous n'utilisez qu'une simple boucle 'for', qui sera exécutée avant que le navigateur ne repeigne. Utilisez une pseudo boucle 'setTimeout()' à la place. – nnnnnn