类似jquery的Javascript显示/隐藏

我需要javascript纯代码来像jQuery一样显示/隐藏。我使用以下代码：

y=document.getElementById('regform').style.display;

if (y == 'block'){
    document.getElementById('regform').style.display='none';
}
else {
    document.getElementById('regform').style.display='block';
}

---

但这是非常快的，我需要减缓效果，就像在jQuery中一样。有什么帮助吗？

您可以这样做：

var element = document.getElementById('regform');
var step = 0.1;
var delay = 50;
var displayMe = function()
  {
    if(element.style.opacity< 1)
    {
       element.style.opacity+= step;
       setTimeout('displayMe()', delay); 
    }    
  }
var hideMe = function()
  {
    if(element.style.opacity> 0)
    {
       element.style.opacity-= step;
       setTimeout('hideMe ()', delay); 
    }    
  }

---

你可以这样做：

var element = document.getElementById('regform');
var step = 0.1;
var delay = 50;
var displayMe = function()
  {
    if(element.style.opacity< 1)
    {
       element.style.opacity+= step;
       setTimeout('displayMe()', delay); 
    }    
  }
var hideMe = function()
  {
    if(element.style.opacity> 0)
    {
       element.style.opacity-= step;
       setTimeout('hideMe ()', delay); 
    }    
  }

var fadeEffect=function（）{
返回{
初始化：函数（id、标志、目标）{
this.elem=document.getElementById（id）；
clearInterval（this.elem.si）；
this.target=target？target:flag？100:0；
this.flag=flag | |-1；
this.alpha=this.elem.style.opacity？parseFloat（this.elem.style.opacity）*100:0；
this.elem.si=setInterval（function（）{fadeEffect.tween（）}，20）；
},
吐温：函数（）{
if（this.alpha==this.target）{
clearInterval（this.elem.si）；
}否则{
var值=数学舍入（this.alpha+（（this.target-this.alpha）*.05））+（1*this.flag）；
this.elem.style.opacity=值/100；
this.elem.style.filter='alpha（不透明度='+value+'）；
此值为0.alpha=值
}
}
}
}();
褪色JavaScript示例
淡入
淡出

Source

var fadeEffect=function（）{
返回{
初始化：函数（id、标志、目标）{
this.elem=document.getElementById（id）；
clearInterval（this.elem.si）；
this.target=target？target:flag？100:0；
this.flag=flag | |-1；
this.alpha=this.elem.style.opacity？parseFloat（this.elem.style.opacity）*100:0；
this.elem.si=setInterval（function（）{fadeEffect.tween（）}，20）；
},
吐温：函数（）{
if（this.alpha==this.target）{
clearInterval（this.elem.si）；
}否则{
var值=数学舍入（this.alpha+（（this.target-this.alpha）*.05））+（1*this.flag）；
this.elem.style.opacity=值/100；
this.elem.style.filter='alpha（不透明度='+value+'）；
此值为0.alpha=值
}
}
}
}();
褪色JavaScript示例
淡入
淡出

---

Source

您可以通过组合JS和CSS3转换来实现

CSS:

JS:

---

您可以通过组合JS和CSS3转换来实现这一点

CSS:

JS:

---

我只需要javascript代码jQuery使用一堆代码来实现动画。你必须创建自己的动画系统。我只需要做缓慢的显示或隐藏来观看，动画或效果不是important@MaysamMrz我想，你只需要JS，因为你在你的问题中已经说过了。我问为什么，因为我想不出原因。我只需要javascript代码jQuery使用一堆代码来实现动画。你必须创建自己的动画系统。我只需要做缓慢的显示或隐藏来观看，动画或效果不是important@MaysamMrz我想，你只需要JS，因为你在你的问题中已经说过了。我问为什么,，因为我想不出这样做的原因。使用

requestAnimationFrame

而不是

set/clearInterval

会更好。使用

requestAnimationFrame

而不是

set/clearInterval

会更好。请至少将

style.alpha

更改为

style.opacity

。请至少更改一下

style.alpha

到

style.opacity

。

var fadeEffect=function(){
    return{
        init:function(id, flag, target){
            this.elem = document.getElementById(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
        },
        tween:function(){
            if(this.alpha == this.target){
                clearInterval(this.elem.si);
            }else{
                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value
            }
        }
    }
}();



<div id="fade">Fading JavaScript Example</div>
    <div id="buttons">
        <div class="button" onclick="fadeEffect.init('fade', 1)">Fade In</div>
        <div class="button floatright" onclick="fadeEffect.init('fade', 0)">Fade Out</div>
    </div>

#regform {
    -webkit-transition:opacity 300ms;
    -moz-transition:opacity 300ms;
    -o-transition:opacity 300ms;
    -ms-transition:opacity 300ms;
}

var toggle = function(elm){
    // check if style property is defined, then read .display, or assume it's "block"
    var y=elm.style ? elm.style.display : '';
    if (!y || y == 'block'){
        // change the opacity. CSS will handle the animation.
        elm.style.opacity='0';
        // change the display to "none" after a delay.
        setTimeout( function(){ elm.style.display = 'none'; }, 300 );
    }
    else {
        // change diplay to block. the element is still transparent.
        elm.style.display='block';
        // set the opacity to 1, CSS will animate it.
        // small delay because some browsers won't properly 
        // animate when changing "display" at the same moment.
        setTimeout( function(){ elm.style.opacity = '1'; }, 10 );
    }
}