Javascript展示/隱藏像jquery

Question

我需要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是可以減緩的影響。任何幫助？

Answer 1

你可以做這樣的事情：

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

然後，您可以使用這些2個功能隱藏/顯示您的DIV：

hideMe(); 
// Or: 
displayMe(); 

Answer 2

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> 

來源http://www.scriptiny.com/2011/01/javascript-fade-in-out/

Answer 3

你可以通過組合JS和C來完成SS3轉換。

http://jsfiddle.net/hQLQQ/1/

CSS：

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

JS：

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