Question

我已经在javascript中编写了一个函数，使元素的不透明度从一些低数字变为1然后再次变为低。我知道这可以用Jquery完成，但我想自己编写。我的问题是：是否有更短/更优雅的方式来写这个？它运作得很好，但看起来很笨重。

function opacityPulse(id,dimLevel){
    var opacity=dimLevel;
    var hump=0;
    var myVar=setInterval(function(){myFunction()},30);
    function myFunction(){
        if((opacity<1) && (!hump)){
            document.getElementById(id).style.cssText="opacity:"+opacity+";";
            opacity=opacity+.01;
        }
        else if((opacity>.99) && (!hump)){
            hump=1;
        }
        else if((opacity>dimLevel) && (hump)){
            document.getElementById(id).style.cssText="opacity:"+opacity+";";
            opacity=opacity-.01;
        }
        else{
            clearInterval(myVar);
        }
    }
}

Answer 1

设置window.toggle = 0.01;和window.opacity = 0.98; 在这里，我们将每个区间的不透明度值增加toggle。切换还可用作增加或减少不透明度的开关。

function opacityPulse(id){
    var element = document.getElementById(id);

    if(toggle==0.01){
      setIncrementedOpacity(element);
      if(opacity > 0.98){
        toggle = -0.01;
      }
    }else{
      setIncrementedOpacity(element);
      if(opacity < 0.02){
          toggle = 0.01;
      }
    }
}

设置不透明度;

function setIncrementedOpacity(element){
    opacity = opacity + toggle;
    element.style.opacity = opacity + "";
    element.style.filter  = 'alpha(opacity='+opacity+')'; //IE fallback
}

使用间隔重复;

setInterval(function(){
      opacityPulse("youarehere");
}, 8);

另外，我不推荐使用它，因为使用css可以实现同样的效果。

用javascript打动不透明度

1 个答案: