Javascript fadeIn fadeOut keeps refading (No JQuery!)

1
votes

I find JQuery really slow so I decided to create my own fadeIn and fadeOut functions so i can easily call them like jquery does. I'm halfway there as it fully works but unfortunately when I click on fadeIn it keeps refading in and when I click on fadeOut it keeps refading out.

I tried to use the display: none; and display: block styles within javascript but that only works for fading Out. It fully works now on IE6 + 7!!. The issue was inside css. If someone can help with javascript now I would be really appreciative.

here's my code:

HTML:

<html>
    <body>
        <a id="fadeI">FadeIn</a>
        <a id="fadeO">FadeOut</a>
        <div id="message"></div>
    </body>
</html>

CSS:

   <style>
#fadeI, #fadeO{
cursor: pointer;
margin-left: 10px;  
zoom: 1;
    }
#message{
        background: url('pictures/iphone1.png') no-repeat;
        width:90px;
        height: 158px;
        z-index: 1;}

</style>

Javascript: 

<script>
    window.onload = function() {
        function fadeOut(id, seconds) {
            var opacity = 1;
            var interval = seconds * 10;
            var outListener = null;
            outListener = setInterval(function() {
                opacity = fadeOutInterval(opacity, id, outListener);
            } , interval);
        }

        function fadeOutInterval(opacity, id, outListener) {
        opacity = opacity - 0.1;
        setOpacity(id, opacity);
        if(opacity < 0) {
            clearInterval(outListener);
               //document.getElementById(id).style.display = 'none';
        }
        return opacity;
        }

        function fadeIn(id, seconds) {
            var opacity = 0;
            var interval = seconds * 10;
            var InListener = null;
            InListener = setInterval(function() {
                opacity = fadeInInterval(opacity, id, InListener);
            } , interval);
        }

        function fadeInInterval(opacity, id, InListener) {
            opacity = opacity + 0.1;
            setOpacity(id, opacity);    
            if(opacity > 1) {
            clearInterval(InListener);
        }   
        return opacity;
        }

        function setOpacity(id, level) {
        document.getElementById(id).style.opacity = level;
            document.getElementById(id).style.MozOpacity = level;
        document.getElementById(id).style.KhtmlOpacity = level;
            document.getElementById(id).style.filter = "alpha(opacity="
                + (level * 100) + ");";
        }

        //delay fadeOut
        setTimeout(delay, 3000);
        function delay(){
            fadeOut('message', 1)
            clearTimeout(delay,1);
            return false;
            }


        //Call functions
        var fadeI = document.getElementById('fadeI');
        var fadO = document.getElementById('fadeO');

        fadeI.onclick = function() {
            fadeIn('message', 1);
        };

        fadeO.onclick = function() {
            fadeOut('message', 1);
        };
    };
</script>
3
javascriptjqueryhtmlfadeinfadeout
You dont have to define functions in the window.onload, you can do it outside to have global access to them – John Smith
I have tried that but it didn't work.. – Al K
I would guess you are getting errors in setOpacity and your interval is never getting cleared. – Jason Goemaat
I don't see any errors there though... any other suggestions/answers? – Al K
I know this won't solve your JS issue, but I'd strongly suggest you do the opacity transformation in CSS. If nothing else, you'll get a much better performance. – Shomz

3 Answers

1
votes
<script>
    window.onload = function() {

        var outListener = 0, InListener = 0, opacity = 1;

        function fadeOut(id, seconds) {
            if(gid(id).style.display != 'none' || gid(id).style.display == ''){
                outListener = setInterval(function() {
                    opacity -= 0.1;
                    setOpacity(id);
                    if(opacity < 0) {
                        clearInterval(outListener);
                    }
                }, seconds);
            }
        }

        function fadeIn(id, seconds) {
            if(gid(id).style.display == 'none'){
                InListener = setInterval(function() {
                    opacity += 0.1;
                    setOpacity(id);
                    if(opacity > 1) {
                        clearInterval(InListener);
                    } 
                }, seconds);
            }
        }
        function setOpacity(id) {
            document.getElementById(id).style.opacity = opacity;
            document.getElementById(id).style.MozOpacity = opacity;
            document.getElementById(id).style.KhtmlOpacity = opacity;
            document.getElementById(id).style.filter = 'alpha(opacity="'+ (opacity * 100) + '");';
            document.getElementById(id).style.display = (opacity<0) ? 'none' : 'block';
        }

        function gid(id){
            return document.getElementById(id);
        }

        var fadeI = gid('fadeI');
        var fadO = gid('fadeO');

        fadeI.onclick = function() {
            fadeIn('message', 1000);
        };

        fadeO.onclick = function() {
            fadeOut('message', 1000);
        };
    };
</script>
0
votes

It might be a good idea just to keep a boolean :"isfaded" and update it as necessary.

with you IE -issue you might first want to look up if it supports html5, so take a look here: http://html5test.com/

0
votes

Based on @malle suggestion, try something this

        var isFadedIn = false;

        //Call functions
        var fadeI = document.getElementById('fadeI');
        var fadO = document.getElementById('fadeO');

        fadeI.onclick = function() {
              if(!isFadedIn){
              fadeIn('message', 1);
              isFadedIn = true;
              }    

        };

        fadeO.onclick = function() {
           if(isFadedIn){
            fadeOut('message', 1);
            isFadedIn = false;
           } 
        };