“Elemen JavaScript memudar” Kode Jawaban

vanilla javascript memudar

<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>
Undefined

Elemen JavaScript memudar

/*@lang css

#target {
    height: 100px;
    background-color: red;
    transition: opacity 1s;
}

*/

const target = document.getElementById("target");

target.addEventListener('click', () => target.style.opacity = '0');
// If you want to remove it from the page after the fadeout
target.addEventListener('transitionend', () => target.remove());
Cheerful Crayfish

Jawaban yang mirip dengan “Elemen JavaScript memudar”

Pertanyaan yang mirip dengan “Elemen JavaScript memudar”

Lebih banyak jawaban terkait untuk “Elemen JavaScript memudar” di JavaScript

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya