1<div id="target">Click to fade</div>
2<script>
3 function fadeOutEffect() {
4 var fadeTarget = document.getElementById("target");
5 var fadeEffect = setInterval(function () {
6 if (!fadeTarget.style.opacity) {
7 fadeTarget.style.opacity = 1;
8 }
9 if (fadeTarget.style.opacity > 0) {
10 fadeTarget.style.opacity -= 0.1;
11 } else {
12 clearInterval(fadeEffect);
13 }
14 }, 200);
15}
16
17document.getElementById("target").addEventListener('click', fadeOutEffect)
18</script>
19<style>
20 #target {
21 height: 100px;
22 background-color: red;
23}
24</style>