Answers for "fade out image javascript"

1

vanilla javascript fade out

<div id="target">Click to fade</div>
<script>
  function fadeOutEffect() {
    var fadeTarget = document.getElementById("target");
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.1;
        } else {
            clearInterval(fadeEffect);
        }
    }, 200);
}

document.getElementById("target").addEventListener('click', fadeOutEffect)
</script>
<style>
  #target {
    height: 100px;
    background-color: red;
}
</style>
Posted by: Guest on August-18-2021
0

javascript display with fade

<script>
//VISIBLE
document.getElementById('yourID').style.transform = "scale(1)";
//INVISIBLE
document.getElementById('yourID').style.transform = "scale(0)";
// Example:
</script>

<div id="yourID" class="hideshow">

<style>
.hideshow{ transition-duration: 0.2s; }
</style>
Posted by: Guest on April-14-2022

Browse Popular Code Answers by Language