Question

我做了一个改变元素不透明度的函数，但你知道它不起作用，以下是我的代码：

   function _opacity(ele, opacity,addOpac , delay ){
    ele = document.getElementById(ele);
    var CurrentOpacity = ele.style.opacity,
        ChangeInOpacity = setInterval(function(){
            if (CurrentOpacity > opacity ) { decrease();};
            if (CurrentOpacity < opacity) { increase();};
            if (CurrentOpacity == opacity) { stopInc();};

            }, delay),

        increase = function(){
            ele.style.opacity = CurrentOpacity;
            CurrentOpacity = CurrentOpacity+addOpac;
        },

        decrease =function(){
            ele.style.opacity = CurrentOpacity;
            CurrentOpacity = CurrentOpacity-addOpac;

        },
        stopInc = function(){
            clearInterval(ChangeInOpacity);
        };
}

此函数的最重要特征之一是不使用任何循环。

这种使用setInterval的意识形态在改变元素的宽度和高度方面非常有效。但是这里这个功能不起作用。

我所知道的是它没有向传递给上述函数的元素添加任何样式属性

这里的错误是什么，因为这不起作用？

提前谢谢。

Answer 1

那里有一些问题：

要获取元素的当前不透明度，您需要使用getComputedStyle函数（或oldIE上的currentStyle属性），而不是.style.opacity。如果明确指定后者，则后者只有一个值，而不是通过样式表隐式指定。
该值为字符串，因此您需要将其转换为数字。
您不太可能完全匹配目标不透明度，因此您需要在越过目标时停止。
您不能将;放在if语句的末尾，因此请将其删除。
您指定了不透明度，但随后递增了它，然后增加的值就是您检查以查看是否已完成，所以即使它不是＃3，您和＆＃39; ＃39; d提早停止。
在JavaScript中，压倒性的约定是以小写字母开始本地变量名。我将计时器句柄的名称更改为timer。

你最好的办法是找出你要去的方向，然后在你超越目标时停下来：

＆＃13;

// Polyfill getComputedStyle for old IE
if (!window.getComputedStyle) {
  window.getComputedStyle = function(element) {
    return element.currentStyle;
  }
}

// Your _opacity function
function _opacity(ele, opacity, addOpac, delay) {
  var direction;
  ele = document.getElementById(ele);
  
  // Determine direction
  direction = +getComputedStyle(ele).opacity < opacity ? 1 : -1;
  var timer = setInterval(function() {
    // Get the *computed* opacity
    var current = +getComputedStyle(ele).opacity;
    if (direction > 0) {
      if (current < opacity) {
        increase(current);
      } else {
        stopInc();
      }
    }
    else {
      if (current > opacity) {
        decrease(current);
      } else {
        stopInc();
      }
    }

  }, delay),

  increase = function(current) {
    // Increase, but don't go past target
    ele.style.opacity = Math.min(current + addOpac, opacity);
  },

  decrease = function(current) {
        
    // Decrease, but don't go past target
    ele.style.opacity = Math.max(current - addOpac, opacity);

  },
  stopInc = function() {
    clearInterval(timer);
  };
};

// Run
_opacity("target", 0.3, 0.05, 50);

＆＃13;

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<div id="target">this is the element</div>

＆＃13;

Answer 2

你可以这样做：

ele.style.opacity = "0.2";// some desired value but string if for all browsers.

了解更多信息，请参阅此帖子：Setting opacity of html elements in different browsers

如何使用javascript动态更改元素的不透明度

2 个答案: