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