纯javascript - 创建我自己的淡出功能[重复]

Question

我正在尝试在纯 javascript 中创建与 jquery .fadeOut() 效果类似的函数，但我的代码遇到了问题。错误代码：

span[0].fadeOutEffect 不是函数

我的代码：

var span = document.querySelectorAll("span");

function fadeOutEffect() {
  var node = this
  var fadeEffect = setInterval(function() {
    if (!node.style.opacity) {
      node.style.opacity = 1;
    }
    if (node.style.opacity > 0) {
      node.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
    }
  }, 50);
}

span[0].fadeOutEffect();

<span>one </span><span>two </span><span>three </span>

Answer 1

当我阅读您的代码时，我发现您可能想向 HTMLElement 原型添加一个函数 - 不建议这样做，但它看起来像这样：

HTMLElement.prototype.fadeOutEffect = function() {
  var node = this
  var fadeEffect = setInterval(function() {
    if (!node.style.opacity) {
      node.style.opacity = 1;
    }
    if (node.style.opacity > 0) {
      node.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
    }
  }, 50);
}

var span = document.querySelectorAll("span");


span[0].fadeOutEffect();

<span>one </span><span>two </span><span>three </span>

一种更简洁的方法是通过跨度：

var fadeOutEffect = function(node) {
  var fadeEffect = setInterval(function() {
    if (!node.style.opacity) {
      node.style.opacity = 1;
    }
    if (node.style.opacity > 0) {
      node.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
    }
  }, 50);
}

var span = document.querySelectorAll("span");


fadeOutEffect(span[0]);

<span>one </span><span>two </span><span>three </span>

Answer 2

您正在尝试将函数作为属性添加到 span 元素的数组中。您应该将其作为参数传递给您创建的函数。此外，document.querySelectorAll("span"); 返回一个跨度数组，因为您的 HTML 文档中可以有多个跨度，因此您可以遍历每个跨度并将您的代码应用于它们。

查看工作示例：

function fadeOutEffect(nodes) {
  nodes.forEach(function(node) { // Loop through each node (each span) in the array of spans
    var fadeEffect = setInterval(function() { // Run your code
      if (!node.style.opacity) {
        node.style.opacity = 1;
      }
      if (node.style.opacity > 0) {
        node.style.opacity -= 0.1;
      } else {
        clearInterval(fadeEffect);
      }
    }, 50);
  });
}

var nodes = document.querySelectorAll("span"); // Nodes is an array of spans
fadeOutEffect(nodes); // Pass the array of spans to your function

<span>Hello world!</span>

Answer 3

您的代码试图在不存在的 DOM 元素上调用函数。尝试将元素作为参数传递给您的函数。

var span = document.querySelectorAll("span");

function fadeOutEffect(node) {
  var fadeEffect = setInterval(function() {
    if (!node.style.opacity) {
      node.style.opacity = 1;
    }
    if (node.style.opacity > 0) {
      node.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
    }
  }, 50);
}

fadeOutEffect(span[0]);

<span>one </span><span>two </span><span>three </span>