0

我需要 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 中那样减慢效果。有什么帮助吗？

4

3 回答 3

3

您可以通过结合 JS 和 CSS3 过渡来做到这一点。

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 );
    }
}
于 2013-09-24T11:12:46.177 回答
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); 
    }    
  }

然后，您可以使用这两个函数来隐藏/显示您的 div：

hideMe();
// Or:
displayMe();
于 2013-09-24T11:06:05.480 回答
1 
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/

于 2013-09-24T11:09:23.907 回答