如何使用纯JavaScript制作fadeOut效果 [英] How to make fadeOut effect with pure JavaScript

问题描述

我正在尝试使用 纯JavaScript 为 div 制作fadeOut效果。

I'm trying to make fadeOut effect for a div with pure JavaScript.

这就是我目前使用的：

//Imagine I want to fadeOut an element with id = "target"
function fadeOutEffect()
{
 var fadeTarget = document.getElementById("target");
 var fadeEffect = setInterval(function() {
  if (fadeTarget.style.opacity < 0.1)
  {
   clearInterval(fadeEffect);
  }
  else
  {
   fadeTarget.style.opacity -= 0.1;
  }
 }, 200);
}

div应该顺利淡出，但它会立即消失。

The div should fade-out smoothly, but it immediately disappear.

怎么了？我该如何解决？

What's wrong? How can I solve it?

jsbin

推荐答案

最初当没有设置不透明度时，该值将为空字符串，这将导致算术失败。您可以将其默认为1并且它将起作用。

Initially when there's no opacity set, the value will be an empty string, which will cause your arithmetic to fail. You can default it to 1 and it will work.

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);

#target {
    height: 100px;
    background-color: red;
}

<div id="target">Click to fade</div>

在进行算术和比较时，空字符串似乎被JavaScript视为0（即使在CSS中它将空字符串视为完全不透明）

An empty string seems like it's treated as a 0 by JavaScript when doing arithmetic and comparisons (even though in CSS it treats that empty string as full opacity)

> '' < 0.1
> true

> '' > 0.1
> false


> '' - 0.1
> -0.1

这篇关于如何使用纯JavaScript制作fadeOut效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！