Javascript show/hide like jquery

Question

I need javascript pure code to do show/hide like jQuery. I use this code:

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

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

but this is done very fast and I need to slow the effect like it is possible in jQuery. Any help?

jQuery uses a bunch of code to implement an animation. You would have to create your own animation system. — Niet the Dark Absol, Sep 24 '13 at 11:02
i just need to do show or hide slowly to seen, animation or effect isn't important — Maysam Mrz, Sep 24 '13 at 11:04
@MaysamMrz I thought, that you need JS only, since you stated that in your question. I asked why, since I can't think of a reason for that. — Vince, Sep 24 '13 at 12:10

pawel · Answer 1 · 2013-09-24T18:36:14.993

You can do it by combining JS and CSS3 transitions.

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

Scalpweb · Accepted Answer · 2013-09-25T07:14:35.263

2

You could do something like this:

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

Then, you can use those 2 functions to hide/display your div:

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

edited Sep 25 '13 at 07:14

answered Sep 24 '13 at 11:06

Scalpweb

1,971
1
12
14

Please at least change `style.alpha` to `style.opacity`. – pawel Sep 24 '13 at 18:37

score 1 · Answer 3 · answered Sep 24 '13 at 11:09

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>

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

Would be even better with `requestAnimationFrame` instead of `set/clearInterval` — pawel, Sep 24 '13 at 11:19

Javascript show/hide like jquery

3 Answers3