How can I make a fade in function without using jQuery like this? (JavaScript)

Question

Below is a simple HTML + CSS + JavaScript (with no jQuery involved) document. If someone tests it he is gonna see that there's a simple text that fades and move when window is loaded.

Code Explanation :

Well its a very simple piece of code. In html there is a paragraph and with css it's opacity is set to 0. Now with JS this property of opacity is changed every 10 mili seconds by 0.01. But I used some global variables to do it (something I don't want).

What I want?

I want to make a function like fadeIn(element, changeOnEveryMiliSecond). In place of element the id of any element I want to fade in and changeOnEveryMiliSecond the change in opacity every 10 mili second. Can anyone guide me how I can do it with the code similar like mine and no global variables? Also I don't want to use any library like jQuery. I can do it that way but I am just making my JavaScript concepts better and figuring out how things are done ;) Here's my code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Fade In</title>
        <style type="text/css">
        html{
            height: 100%;
            width: 100%;
            margin: 0 auto;
            padding: 0;
        }
        #main_body{
            background: black;
        }
        #text{
            font: normal 2em ebrima;
            color: white;
            opacity: 0;
            position: absolute;
        }
        </style>
        <script type="text/javascript">
            var op = 0;
            var pos = 0;
            function main(){
                if(op != 1) op = op + 0.01;
                if(pos != 50) pos = pos + 1;
                document.getElementById('text').style.opacity = op;
                document.getElementById('text').style.top = pos + 'px';
            }
            window.addEventListener('load', setInterval(main, 10), false);
        </script>
    </head>

    <body id="main_body">
        <p id="text">Hello World</p>
    </body>

</html>

There is a solution described here: youmightnotneedjquery.com/#fade_in — keaukraine
– keaukraine, Commented Feb 27, 2014 at 10:38

sanjeev · Accepted Answer · 2014-02-27 11:32:14Z

1

This will 100% work for you, any problem do ask me

    <script type="text/javascript">

    function fadeIn(element, changeOnEveryMiliSecond){
      ChangeInterval = setInterval(
      function(){
        Opacity = window.getComputedStyle(element).getPropertyValue("opacity");
        if(Opacity >= 1){
                   clearInterval(ChangeInterval);
                  }
        element.style.opacity = parseFloat(Opacity) + changeOnEveryMiliSecond;  

      }
      ,10); //set the interval for repeat
    }

        window.addEventListener('load', function(){fadeIn(document.getElementById('text'),0.01);}, false);

    </script>

edited Feb 27, 2014 at 11:32

answered Feb 27, 2014 at 11:08

sanjeev

4,6512 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Faiz Ahmed Over a year ago

I need sometime to figure out what is happening!

sanjeev Over a year ago

take your time, if struck somewhere do seek help

Faiz Ahmed Over a year ago

In js bin

Line 7: (Opacity >= 1)?clearInterval(ChangeInterval):''; --- Expected an assignment or function call and instead saw an expression. Line 11: ,10); //set the interval for repeat --- Comma warnings can be turned off with 'laxcomma' Line 10: } --- Bad line breaking before ','.

sanjeev Over a year ago

it worked form in chrome,opera,safari,ie & ff, unaware of js bin sorry

sanjeev Over a year ago

which browser your are using, & made some edit for js bin , try the edited code

|

Denys Séguret · Accepted Answer · 2014-02-27 10:39:19Z

0

Basically, the first problem is that you're passing to addEventListener the function return instead of the function.

Change

window.addEventListener('load', setInterval(main, 10), false);

to

window.addEventListener('load', function(){setInterval(main, 10)}, false);

Another problem is that you never stop your loop. This works but it's costly. You could either remove the interval with clearInterval or use a setTimeout based solution.

Demonstration

answered Feb 27, 2014 at 10:39

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

3 Comments

Faiz Ahmed Over a year ago

There isn't any problem with my code I'm just asking to make it a function. So that I don't have to make functions like this again and again. And without using global variables

Denys Séguret Over a year ago

Yes, there was a problem : you weren't waiting for the page to load. It wouldn't have worked with image.

Denys Séguret Over a year ago

The simplest solution to avoid global variables is to use an IIFE.

GreyRoofPigeon · Accepted Answer · 2014-02-27 10:54:18Z

You could also use a (pure) CSS animation:

#text{
    top: 0;
    font: normal 2em ebrima;
    color: white;
    position: absolute;
    -webkit-animation: moveIn 2s forwards; /* Safari 4+ */
    -moz-animation:    moveIn 2s forwards; /* Fx 5+ */
    -o-animation:      moveIn 2s forwards; /* Opera 12+ */
    animation:         moveIn 2s forwards; /* IE 10+ */

}
@-webkit-keyframes moveIn {
  0%   { opacity: 0; top: 0p; }
  100% { opacity: 1; top: 50px; }
}
@-moz-keyframes moveIn {
  0%   { opacity: 0; top: 0p; }
  100% { opacity: 1; top: 50px; }
}
@-o-keyframes moveIn {
  0%   { opacity: 0; top: 0p; }
  100% { opacity: 1; top: 50px; }
}
@keyframes moveIn {
  0%   { opacity: 0; top: 0p; }
  100% { opacity: 1; top: 50px; }
}

Also check the demo.

Collectives™ on Stack Overflow

How can I make a fade in function without using jQuery like this? (JavaScript)

Code Explanation :

What I want?

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code Explanation :

What I want?

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related